<template>
<lightning-button onclick={showPopUp} label=”Show PopUp”></lightning-button>
<div class=”demo-only” style=”height: 640px;” if:true={checkBool}>
<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”>
<header class=”slds-modal__header”>
<button class=”slds-button slds-button_icon slds-modal__close slds-button_icon-inverse” title=”Close” onclick={closeModal}>
<lightning-icon icon-name=”utility:close” size=”medium”>
</lightning-icon>
<span class=”slds-assistive-text”>Close</span>
</button>
<h2 id=”modal-heading-01″ class=”slds-text-heading_medium slds-hyphenate”>Sample Header Information</h2>
</header>
<div class=”slds-modal__content slds-p-around_medium” id=”modal-content-id-1″>
Test Body Information
</div>
<footer class=”slds-modal__footer”>
<center><h1 style=”color:green;”>Footer Information</h1></center>
</footer>
</div>
</section>
<div class=”slds-backdrop slds-backdrop_open”></div>
</div>
</template>
JavaScript:
import { LightningElement, track } from ‘lwc’;
export default class Example extends LightningElement {
@track checkBool = false;
showPopUp(){
this.checkBool = true;
}
closeModal() {
this.checkBool = false;
}
}
JavaScript-meta.xml:(For using the LWC as a Tab)
<?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__Tab</target>
</targets>
</LightningComponentBundle>
Output:
