Modal Body

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.

1<!-- my/modalDialog.html -->
2<template>
3    <lightning-modal-header label="My Modal Heading">
4        Tagline content with <a href="https://salesforce.com">Salesforce.com link</a>
5    </lightning-modal-header>
6    <lightning-modal-body>
7        <!-- modal content specified in LightningModal component -->
8        { content }
9        <!-- alternatively, add content here directly -->
10    </lightning-modal-body>
11    <lightning-modal-footer>
12        Footer Content
13    </lightning-modal-footer>
14</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.

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.

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

lightning/modal

Lightning Web Components Developer Guide: Modal Windows