display popup/modal on button click in lightning salesforce - Salesforce Globe For You

 display popup/modal on button click in lightning salesforce  - Salesforce Globe For You 

displayPopup.html

<template>

    <lightning-card  title="Popup Example">

    <div class="slds-p-around_medium">

        <lightning-button label="Open Popup" variant="brand" onclick={openPopupModal}>

        </lightning-button>

        <template if:true={openPopup}>

            <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={closePopupModal}>

                <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-modal__title slds-hyphenate">Header</h2>

                </header>

                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                <p> Body</p>

                </div>

                <footer class="slds-modal__footer">

                <button class="slds-button slds-button_neutral" onclick={closePopupModal}>Cancel</button>

                <button class="slds-button slds-button_brand">Save</button>

                </footer>

                </div>

                </section>

                <div class="slds-backdrop slds-backdrop_open"></div>

            </template>

    </div>

</lightning-card>

</template>

displayPopup.js

import { LightningElement,api } from 'lwc';

export default class DisplayPopup extends LightningElement {

    @api openPopup = false;

    openPopupModal(){

        this.openPopup = true;

    }

    closePopupModal() {

        this.openPopup = false;

    }

}

displayPopup.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: