Modal Body

lightning-modal-body

The modal body component to display main content area in lightning modal.

For Use In

Lightning Experience, Standalone Lightning App

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

The lightning-modal-body component renders the content of a modal.

The modal components render in the order they appear in the template. Place the lightning-modal-body component after lightning-modal-header and before lightning-modal-footer components, if you're providing them.

This sample code shows the expected order of the modal components.

<!-- my/modalDialog.html -->
<template>
    <lightning-modal-header label="My Modal Heading">
        Tagline content with <a href="https://salesforce.com">Salesforce.com link</a>
    </lightning-modal-header>
    <lightning-modal-body>
        <!-- modal content specified in LightningModal component -->
        { content }
        <!-- alternatively, add content here directly -->
    </lightning-modal-body>
    <lightning-modal-footer>
        Footer Content
    </lightning-modal-footer>
</template>

Your JavaScript class for the modal must extend from the lightning/modal module.

You can nest content in lightning-modal-body or lightning-modal-body automatically scrolls the modal's content when necessary. The modal's maximum height is calculated to prevent the content from exceeding the screen height, and scroll bars are automatically added.

Design

lightning-modal-body implements the modals blueprint in the Salesforce Lightning Design System (SLDS). The modals adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

Accessibility

See Lightning Web Components Developer Guide for more information about accessibility in modals.

See Also

lightning/modal

Lightning Web Components Developer Guide: Modal Windows

:::::

:::::tab ::component-specification{component="modalBody" model="lwc" namespace="lightning"}

:::::

::::::