Hello Great Readers!
Previously, I have told you Use of Conditional Rendering in Lightning Web Component. Have you ever think what is Modal Popup? So, let me tell you its a child window with that user interacts before they returning to the parent application. And this window often have a different appearances than normal windows.
Now, let’s come to the point, I know you may have been ever came across to this use case to create the modal popup in LWC. So, here I am today to share with you the code snippet for your help. Creating the modal popup is so easy in LWC and it’s just few minutes of tasks.
Modal Popup creates with the various methods will discuss only one of the way here.
Create the Custom Component using VS code.
Step 1: Create the Lightning Web Component
<template>
<!-- Modal will open on click of this modal -->
<lightning-button name="showModal" label="Show Modal" onclick={showModal} variant="brand" class="slds-m-around_small"></lightning-button>
<!-- This Modal will only be visible if showModal is set to true -->
<template if:true={openModal}>
<section aria-modal="true" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container ">
<header class="slds-modal__header">
<h2 class="slds-text-heading_small">Modal Header</h2>
<lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={closeModal}></lightning-icon>
</header>
<div class="slds-modal__content">
<div class="slds-p-around_small">
<p>Forceblogs.com.</p><br />
<p>Hello! Readers</p>
</div>
</div>
<footer class="slds-modal__footer">
<lightning-button variant="brand" label="Cancel" onclick={closeModal} class="slds-p-around_x-small"></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>In javascript, you only need to add or change in the value of the property.
import { LightningElement, track } from 'lwc';
export default class CustomModal extends LightningElement {
@track showModal = false;
openModal() {
// Setting boolean variable to true, this will show the Modal
this.showModal = true;
}
closeModal() {
// Setting boolean variable to false, this will hide the Modal
this.showModal = false;
}
}Let us know in the comment section if this component helps you out. !!
If you want to add anything in this component further Chat with us, We will be more than happy to assist you.
And thank you for being an awesome readers!
Recent Comments