EP-25 | Custom Modal Popup in LWC | LWC Stack ☁️⚡️

Kapil June 25, 2021

 

   LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-25


ModalPopup HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <template if:true={showModal}>
    <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 Start -->
        <header class="slds-modal__header">
          <lightning-button-icon
            class="slds-modal__close"
            title="Close"
            icon-name="utility:close"
            icon-class="slds-button_icon-inverse"
            onclick={handleDialogClose}
          ></lightning-button-icon>

          <h2 class="slds-text-heading_medium slds-hyphenate header-string">
            My Modal Popup
          </h2>
        </header>
        <!-- Header End -->
        <div
          class="slds-modal__content slds-p-around_medium"
          id="modal-content-id-1"
        >
          <slot>
            <p>This is a custom modal popup component.</p>
          </slot>
        </div>
      </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
  </template>
</template>
ModalPopup JS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { LightningElement, api } from "lwc";


export default class Modal extends LightningElement {
  showModal = false;

  @api show() {
    this.showModal = true;
  }
  handleDialogClose() {
    this.showModal = false;
  }
}

Container HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <lightning-card title="MiscModal" icon-name="custom:custom19">
    <div class="slds-var-m-around_medium">
      <lightning-button
        label="Show modal"
        onclick={handleShowModal}
      ></lightning-button>
      <c-modal-Popup> </c-modal-Popup>
    </div>
  </lightning-card>
</template>

Container JS
1
2
3
4
5
6
7
8
import { LightningElement } from "lwc";

export default class PreviewModal extends LightningElement {
  handleShowModal() {
    const modal = this.template.querySelector("c-modal-Popup");
    modal.show();
  }
}

Checkout complete video tutorial and output below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

0 Comments