easy-modal-window

    3.0.0 • Public • Published

    easy-modal-window

    なにこれ

    Flexbox実装のかんたんモーダルウィンドウ。

    使い方

    $ npm i easy-modal-window
    import ModalWindow from 'easy-modal-window';
     
    const promise = ModalWindow.open(element);

    API

    .open(element or selector)

    引数の要素orセレクタに一致する最初の要素をモーダルウィンドウで展開する。
    既に展開されていれば入れ替える。
    展開後に解決するpromiseを返す。

    const promise = await ModalWindow.open(element);
     
    const promise = await ModalWindow.open('selector');

    .close()

    モーダルウィンドウが展開されていれば閉じる。
    閉じた後に解決するpromiseを返す。

    .toggle(element)

    引数の要素を中心にモーダルウィンドウを展開する。
    既に展開されていれば閉じる。
    展開後・または閉じた後に解決するpromiseを返す。

    .backgroundColor

    展開中の背景色に使用する文字列。

    ModalWindow.backgroundColor; // "rgba(0,0,0, 0.7)"
    ModalWindow.backgroundColor = "red";

    .insertedElement

    モーダルウィンドウで展開中の要素への参照。

    ModalWindow.insertedElement; // null
    await ModalWindow.open(element);
    ModalWindow.insertedElement; // element

    .isBackgroundBlur

    モーダルウィンドウの展開中に背景をボカすか。

    ModalWindow.isBackgroundBlur; // true
    ModalWindow.isBackgroundBlur = false;

    .isCloseOnBackgroundClick

    背景クリックでモーダルウィンドウを閉じるか。

    ModalWindow.isCloseOnBackgroundClick; // true
    ModalWindow.isCloseOnBackgroundClick = false;

    .isCloseOnInsertedElement

    展開中の要素クリックでもモーダルウィンドウを閉じるか。

    ModalWindow.isCloseOnInsertedElement; // false
    ModalWindow.isCloseOnInsertedElement = true;

    .isOpen

    モーダルウィンドウが展開中ならtrue、そうでなければfalseが入る。 読取専用。

    ModalWindow.isOpen; // false
    await ModalWindow.open(element);
    ModalWindow.isOpen; // true

    Events

    • onopen
    • onreplace
    • onclose
    ModalWindow.onopen = (evt)=>{
        console.log(evt); // {target: element, timeStamp: number, type: "open"}
    }

    Install

    npm i easy-modal-window

    DownloadsWeekly Downloads

    2

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • honeo