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>
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>58.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
