Modal/Popup in Lightning Web Component (LWC)

In this post, we will talk about how to create a modal/Popup in Lightning web Component (LWC). There are two ways to create show modals and popups are through styling and making a custom HTML modal or you can use the Winter ’23 Modal Component feature overlays Library called lightning-modal tag.

What is Modal / Popup in Lightning Web Component

Modals/Popup Box are used to display content in a layer above the app. Mostly used to creation or editing of a record, as well as various types of messaging and wizards. Modal/Popup Lightning Web Component(LWC) Salesforce looks like following image.

1. Modal / Popup Example Lightning Web component(LWC)

You can take a help from SLDS for creating the modals. Code has following three main part

  • section
  • header
  • footer

Create Lightning web component in your sandbox or developer org.


    <lightning-button variant="success" label="Open popup"
                        title="Open popup" onclick={showModalBox}>

   <!-- modal start -->      
   <template if:true={isShowModal}>

                I Used SLDS for this code
                Here is link

    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
        <!-- modal header start -->
          <header class="slds-modal__header">
             <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
                <lightning-icon icon-name="utility:close"
                   size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
             <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Welcome in Apex Hours</h2>
          <!-- modal body start -->
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <p>Modal/Popup in Lightning Web Component (LWC) Demo</p>

          <!-- modal footer start-->
          <footer class="slds-modal__footer">
             <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>
    <div class="slds-backdrop slds-backdrop_open"></div>
 <!-- modal end -->

  • Enable and disable the modal with template if:true
  • Use section role=’dialog’


import { LightningElement,track } from 'lwc';

export default class ModalDemoInLWC extends LightningElement {
    @track isShowModal = false;

    showModalBox() {  
        this.isShowModal = true;

    hideModalBox() {  
        this.isShowModal = false;


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

2. Create Overlays with the New Winter ’23 Modal Component

Salesforce introduce a new overlay tag in winter 23 for LWC called lightning-modal. To create a modal component in LWC, You need to import LightningModal from lightning/modal in your JavaScript file. Then, create a component class that extends LightningModal

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {

    handleOkay() {

This component doesn’t use a lightning-modal tag. Instead, the modal’s HTML template uses helper lightning-modal-* components to make the modal’s header, footer, and body. The lightning-modal-body component is required, and the others are optional

<!-- c/myModal.html -->

    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
    <lightning-modal-body>This is the modal’s contents.</lightning-modal-body>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>


Learn more about model in lightning web component from here. Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide.

Amit Chaudhary
Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.

He is a active blogger and founder of Apex Hours.

Articles: 460


  1. I need a pop up with selection where it will be anything other that radio type to achieve single selection with bg color changing on selection ..any idea ?

Leave a Reply

Your email address will not be published. Required fields are marked *