共通モーダル画面作成方法説明

  • 共通モーダルはモーダルを開くための API を持ち、他のコンポーネントから呼び出すことができます。

  • 他のコンポーネントで、共通モーダル画面を表示するための API を呼び出します。この API は、共通モーダル画面を表示するために必要なデータを受け取ります。

  • 共通モーダル画面のコンポーネントは、受け取ったデータを使用して、モーダルを表示します。

  • 共通モーダル画面のコンポーネントは、モーダルを閉じるための API を持ち、他のコンポーネントから呼び出すことができます。

  • 他のコンポーネントで、共通モーダル画面を閉じるための API を呼び出します。

実装例

構成図：
【Salesforce】LWCモーダル画面自分で作る

.slds-modal__content.slds-p-around_medium {
  text-align: center !important;
}

<template>
  <!--Use template if:true to display/hide popup based on isModalOpen value-->
  <template if:true="{_isModalOpen}">
    <!-- Modal/Popup Box LWC starts here -->
    <section
      role="dialog"
      tabindex="-1"
      aria-labelledby="modal-heading-01"
      aria-modal="true"
      class="slds-modal slds-fade-in-open"
    >
      <div class="slds-modal__container">
        <!-- Modal/Popup Box LWC header here -->
        <header class="slds-modal__header">
          <button
            class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
            title="Close"
            onclick="{closeModal}"
          >
            <lightning-icon
              icon-name="utility:close"
              alternative-text="close"
              variant="inverse"
              size="small"
            ></lightning-icon>
            <span class="slds-assistive-text">Close</span>
          </button>
          <h2 class="slds-text-heading_medium slds-hyphenate">{title}</h2>
        </header>
        <!-- Modal/Popup Box LWC body starts here -->
        <div class="slds-modal__content slds-p-around_medium">
          <lightning-formatted-rich-text
            value="{content}"
          ></lightning-formatted-rich-text>
        </div>
        <!-- Modal/Popup Box LWC footer starts here -->
        <footer class="slds-modal__footer">
          <button
            class="slds-button slds-button_neutral"
            onclick="{closeModal}"
          >
            いいえ
          </button>
          <button
            class="slds-button slds-button_brand"
            onclick="{confirmHandle}"
          >
            はい
          </button>
        </footer>
      </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
  </template>
</template>

import { LightningElement, track, api } from "lwc";
export default class Modal extends LightningElement {
  @api name;
  //表示フラグ
  @track _isModalOpen;
  //タイトル
  @track _title;
  //コンテンツ
  @track _content;

  @api
  openModal() {
    this._isModalOpen = true;
  }

  /**
   * クローズ
   */
  closeModal(e) {
    e.preventDefault();
    this._isModalOpen = false;
    let changenEvent = new CustomEvent("confirm", {
      detail: false,
      composed: true,
      bubbles: true,
      cancelable: true,
    });
    this.dispatchEvent(changenEvent);
  }

  /**
   * 「はい」ボタン押下
   */
  confirmHandle(e) {
    e.preventDefault();
    this._isModalOpen = false;
    let changenEvent = new CustomEvent("confirm", {
      detail: true,
      composed: true,
      bubbles: true,
      cancelable: true,
    });
    this.dispatchEvent(changenEvent);
  }

  @api
  get title() {
    return this._title;
  }

  set title(val) {
    this._title = val;
  }

  @api
  get content() {
    return this._content;
  }

  set content(val) {
    this._content = val;
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>