【Salesforce】LWC 共通モーダル画面を作成

目的

LWCでの共通モーダル画面を作成する方法を共通します

ソース

modal

modal.css

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

modal.html

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

modal.js

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

modal.js-meta.xml

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

参考