Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.
How to create a Modal?
To create the Modal, we need the below tags:
Section
The HTML <section> element represents a standalone section. You can read more about the section in the MDN web doc. Within a section tag, you can define model container div. While creating the section, below attribute values are needed.
role
Identifies the element that serves as the dialog container.
tabindex
The tabindex global attribute indicates that its elements can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).
A negative value is useful when you have off-screen content that appears on a specific event.
aria-labelledby
Use this attribute to label the dialog. Often, the value of the aria-labelledby attribute will be the id of the element used to title the dialog.
aria-describedby
Use this attribute to describe the contents of the dialog
aria-modal="true"
Tells assistive technologies that the windows underneath the current dialog are not available for interaction
<section role="dialog"
aria-modal="true"
tabindex="-1"
aria-labelledby="modal-heading-01"
aria-describedby="modal-content-id-1"
class="slds-modal slds-fade-in-open">
</section>
Modal Container Div
This is the main div within the section which starts the Model window. Under this Div, you can have below three subtags:
Header
Body
Footer
Use SLDS CSS to build the modal in LWC.
Example
LWC_ModalDemo.html
<template>
<!--Define a Lightning button-->
<lightning-button variant="brand"
label="Show Modal"
onclick={showModalWindow}>
</lightning-button>
<!-- modal start -->
<template if:true={isModalDisplay}>
<section role="dialog"
aria-modal="true"
tabindex="-1"
aria-labelledby="modal-heading-01"
aria-describedby="modal-content-id-1"
class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<!--Cross window Icon-->
<header class="slds-modal__header" >
<lightning-button-icon
class="slds-modal__close"
title="Close"
icon-name="utility:close"
icon-class="slds-button_icon-inverse"
onclick={handleDialogClose}
></lightning-button-icon>
<h2 class="slds-text-heading_medium slds-hyphenate header-string" id="modal-heading-01">The modal header</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>The modal content</p>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral"
onclick={handleDialogClose}>Cancel</button>
<button class="slds-button slds-button_brand">Save</button>
</footer>
</div>
</section>
</template>
<!-- modal end -->
</template>
LWC_ModalDemo.js
import { LightningElement } from 'lwc';
export default class LWC_modal_Demo extends LightningElement {
isModalDisplay = false;
showModalWindow(){
console.log('This is showModalWindow');
this.isModalDisplay=true;
}
handleDialogClose(){
this.isModalDisplay=false;
}
}
lWC_modal_Demo.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
