Popup: openModal()

このメソッドはモーダルのポップアップを開きます。

構文

Popup.openModal(container) => Envelope

引数

• container: PopupContainer

  表示するポップアップのコンテナです。

返値: Envelope

モーダルポップアップが閉じた際の結果で解決される Envelope です。

例外

• TypeError
  • 引数 container が PopupContainer のインスタンスでなかった場合。

例

<div id="myModal">
    <p>modal popup Test</p>
    <div id="twoButton">
        <button id="cancel-button" data-ui-component data-active-events="click">Cancel</button>
        <button id="ok-button" data-ui-component data-active-events="click">OK</button>
    </div>
</div>

import { Popup, PopupContainer } from "/alier_sys/Popup.js";
class MyPopup extends PopupContainer {
    constructor() {
        super();
        this.relateElements(
            this.collectElements(
                this.loadContainer({ file: "popupTest_popup.html", id: "myModal" })
            )
        );
    }
    async messageHandler(msg) {
        return await msg.deliver({
            okButton: () => {
                this.close(true);
            },
            cancelButton: () => {
                this.close(false);
            }
        });
    }
}

let result = await Popup.openModal(new MyPopup());
console.log(result);    // cancelボタンを押すとfalse / okボタンを押すとtrue

解説

引数 container を表示するモーダルポップアップを開きます。

この関数が呼ばれると、副作用として引数 container に close() メソッドが追加されます。モーダルポップアップを閉じるには、この container.close() メソッドを呼び出してください。また、container.close() メソッドの引数には任意の値を渡すことが出来ます。この時引数に渡した値で、返値の Envelope は解決されます。