Breaking News: Grepper is joining You.com. Read the official announcement!

Modal LWC javascript

Yellowed Yak answered on August 9, 2022 Popularity 8/10 Helpfulness 4/10

answer Modal LWC javascript

related Modal LWC html

Modal LWC javascript

Comment

import { LightningElement,track } from 'lwc';

export default class ModalDemoInLWC extends LightningElement {
    @track isShowModal = false;

    showModalBox() {  
        this.isShowModal = true;
    }

    hideModalBox() {  
        this.isShowModal = false;
    }
}

Popularity 8/10 Helpfulness 4/10 Language whatever

Source: www.apexhours.com

Tags: javascript lwc whatever

Link to this answer
Share Copy Link

Contributed on Aug 09 2022

Yellowed Yak

0 Answers Avg Quality 2/10

Closely Related Answers

Modal LWC html

Comment

<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>

Popularity 9/10 Helpfulness 5/10 Language html

Source: www.apexhours.com

Tags: html lwc htm

Link to this answer
Share Copy Link

Contributed on Aug 09 2022

Yellowed Yak

0 Answers Avg Quality 2/10

Modal LWC javascript

Contents

More Related Answers

Modal LWC javascript

Closely Related Answers

Modal LWC html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.