--- schema_version: "1" id: 9713b2c7a893f6ad82557479faaa0d6ce17ba832db3d3bb5c0614e2fd14371b9 title: Modal Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_modal_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_modal_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: ab9cd7619624cf642b7fc418e209133df44562a86450532d279ade1c1618c2bc description: For the managed package runtime, this page contains a Modal LWC ReadMe for each release. products: - Omnistudio release: "264" --- # Modal Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a Modal LWC ReadMe for each release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Spring '22 The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the Prompt Lightning Web Component for form submission confirmation. ## Available c-modal Attributes

Attribute

Value

Type

Required

Description

title

  

string

  

Adds the header title to the modal component.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

isModalOpen

true, false (Default: false)

boolean

  

To show the modal by default, set to true.

hideheader

no value (See example code.)

string

  

Hides the header from the modal.

hidefooter

no value (See example code.)

string

  

Hides the footer from the modal.

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

Sets the height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

min-height

CSS (If height is set this won't apply)

string

  

Sets the minimum height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

max-height

CSS (If height is set this won't apply)

string

  

Sets the maximum height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

modalBackdropStyle

CSS

string

  

Sets the custom backdrop style.

channelName

  

string

  

Specify the channel name for closing the modal on pubsub event.
## Example c-modal Component ```

Header description

 ``` ## Available Methods openModal() If hidden, shows the modal. closeModal() If visible, hides the modal. ## Vlocity Insurance and Health Summer '20 The _Modal Lightning Web Component_ displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the _Prompt Lightning Web Component_ for form submission confirmation. ## Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

max-height

CSS (If height is set this won't apply)

string

  

To set the max-height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

min-height

CSS (If height is set this won't apply)

string

  

To set the min-height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

modalBackdropStyle

CSS

string

  

Sets custom backdrop style.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.
## Example c-modal Component ```

Header description

 ``` ## Available Methods openModal() If hidden, shows the modal. closeModal() If visible, hides the modal. ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Modal Lightning Web Component_ displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the _Prompt Lightning Web Component_ for form submission confirmation. ## Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.
## Example c-modal Component ```

Header description

 ``` ## Available Methods openModal() If hidden, shows the modal. closeModal() If visible, hides the modal. ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Modal Lightning Web Component_ displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the_Prompt Lightning Web Component_ for form submission confirmation. ## Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.
## Example c-modal Component ```

Header description

 ``` ## Available Methods openModal() If hidden, shows the modal. closeModal() If visible, hides the modal.