easy-modal-window

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