easy-modal-window
なにこれ
Flexbox実装のかんたんモーダルウィンドウ。
使い方
$ npm i easy-modal-window
; const promise = ModalWindow;
API
.open(element or selector)
引数の要素orセレクタに一致する最初の要素をモーダルウィンドウで展開する。
既に展開されていれば入れ替える。
展開後に解決するpromiseを返す。
const promise = await ModalWindow; const promise = await ModalWindow;
.close()
モーダルウィンドウが展開されていれば閉じる。
閉じた後に解決するpromiseを返す。
.toggle(element)
引数の要素を中心にモーダルウィンドウを展開する。
既に展開されていれば閉じる。
展開後・または閉じた後に解決するpromiseを返す。
.backgroundColor
展開中の背景色に使用する文字列。
ModalWindowbackgroundColor; // "rgba(0,0,0, 0.7)"ModalWindowbackgroundColor = "red";
.insertedElement
モーダルウィンドウで展開中の要素への参照。
ModalWindowinsertedElement; // nullawait ModalWindow;ModalWindowinsertedElement; // element
.isBackgroundBlur
モーダルウィンドウの展開中に背景をボカすか。
ModalWindowisBackgroundBlur; // trueModalWindowisBackgroundBlur = false;
.isCloseOnBackgroundClick
背景クリックでモーダルウィンドウを閉じるか。
ModalWindowisCloseOnBackgroundClick; // trueModalWindowisCloseOnBackgroundClick = false;
.isCloseOnInsertedElement
展開中の要素クリックでもモーダルウィンドウを閉じるか。
ModalWindowisCloseOnInsertedElement; // falseModalWindowisCloseOnInsertedElement = true;
.isOpen
モーダルウィンドウが展開中ならtrue、そうでなければfalseが入る。 読取専用。
ModalWindowisOpen; // falseawait ModalWindow;ModalWindowisOpen; // true
Events
- onopen
- onreplace
- onclose
ModalWindow{ console; // {target: element, timeStamp: number, type: "open"}}