Model Pop-up in Lightning Web Components

In this article, we will work on a very basic scenario “How we can show and hide the model popup in lightning web components”.

modelPopUp.html

<template>
    <lightning-card>
        <lightning-button variant="brand" label="Show" title="Primary action" onclick={show}
            class="slds-m-left_x-small"></lightning-button>
    </lightning-card>
    <div if:true={flag}>
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium"
            aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
            <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">
                        <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                        </svg>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal Header</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat
                        veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud
                        elit
                        officia tempor esse quis. Cillum sunt ad dolore quis
                        aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit
                        dolor
                        adipisicing.</p>
                    <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim
                        laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod
                        pariatur
                        proident. Eiusmod et adipisicing culpa deserunt nostrud
                        ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco
                        mollit enim excepteur ea.</p>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={hide}>Close</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</template>

modelPopUp.js

import { LightningElement, track } from 'lwc';

export default class modelPopUp extends LightningElement {
    @track flag = false;

    show() {
        this.flag = true;
    }

    hide() {
        this.flag = false;
    }
}

Make sure to replace or add the additional below code in your XML file. So that, you can add your component on record page or below respected targets.

modelPopUp.js-meta.xml

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

Here is the video, how you will add the component on detail and what is the actual output.

Hope the above code work for you. We will add more articles soon. So, don’t forget to subscribe our website. You can add in our WhatsApp group.

Please provide us your valuable feedback. We will appreciate your efforts.