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