Monday, 3 August 2020

Modal/Popup in Lightning Web Component (LWC)

In this post we will talk about how to create modal/Popup in Lightning web Component (LWC). Currently "lightning:overlayLib" is not available in LWC, the only way to show modals and popups is through styling and making a custom html modal. 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.


If you want to know how to create Modal in Lightning aura component, please refer to this post.


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.

modalDemoInLWC.html
<template>
    <lightning-button variant="success" label="Open popup"
                        title="Open popup" onclick={showModalBox}>
    </lightning-button>

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

            <!--
                I Used SLDS for this code
                Here is link https://www.lightningdesignsystem.com/components/modals/
            --> 

    <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"
                   alternative-text="close"
                   variant="inverse"
                   size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
             </button>
             <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Welcome in Apex Hours</h2>
          </header>
      
          <!-- 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>
          </div>

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

</template>
  • Enable and disable the modal with template if:true
  • Use section role='dialog'

modalDemoInLWC.js
import { LightningElement,track } from 'lwc';

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

    showModalBox() {  
        this.isShowModal = true;
    }

    hideModalBox() {  
        this.isShowModal = false;
    }
}

modalDemoInLWC.js-meta.js
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>




8 comments:

  1. when be use this modal in UtilityBar it is not displayed in Full Screen. Is there any way we can display it in full Screen.

    ReplyDelete
  2. Thanks for sharing this information.
    Yes Done is the best online site for on demand home services, professional service providers in Jaipur, Rajasthan. We are providing top services like carpenter, cleaning, TV, best pest control services in Jaipur, ro repair service in Jaipur, ac repair service in Jaipur online by Yes Done is there for services at your doorstep in Jaipur, Rajasthan. For more service visit our website. For more services visit our website.

    ReplyDelete
  3. It's a great blog, shares a piece of good information.

    GIEC Global is the leading education and migration consultants in Australia. We are top Education consultants in Melbourne, Sydney, Perth, Brisbane, Adelaide and Australia. We are best education consultants for Canada in Australia. We also helps people in studying in USA and have been awarded as education consultants for USA in Melbourne and education consultant for UK in Australia.

    ReplyDelete
  4. The awesome blog shares good information with everyone. I will bookmark it in the future.

    France Education Consultants in Australia is GIEC Global. We are top Education consultants for Norway in Melbourne, Sydney, Perth, Brisbane, Adelaide and Australia. We are best education consultants for Netherlands in Australia. We also helps people in studying in Ireland and have been awarded as education consultants for Ireland in Melbourne and education consultant for Finland in Australia.

    ReplyDelete
  5. Nice Blog, worth reading it. I have also bookmarked it for the future.

    If you are looking to Work in Australia , Work in Canada, Work in USA, Work in UK, or Work in Ireland then GIEC Global will be the best consultant for you in Australia.

    ReplyDelete
  6. Good One. Worth reading it once.

    If you are looking to Visit to Australia , Visit to Canada, Visit to USA, or Visit to UK then GIEC Global will be the best consultant for you in Australia.

    ReplyDelete
  7. Brother, your content is awesome and very informative. I also have a website , please visit and share you review too
    Brahmrishi is very good website
    jaisana

    ReplyDelete