# easy-modal-window

> かんたんモーダルウィンドウ

Latest version **3.0.0** (published 2017-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install easy-modal-window
pnpm add easy-modal-window
yarn add easy-modal-window
bun add easy-modal-window
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-07-22 |
| First published | 2016-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | honeo |
| Maintainers | honeo |
| Keywords | easy, modal, window |

## Links

- npm: https://www.npmjs.com/package/easy-modal-window
- Repository: https://github.com/honeo/easy-modal-window
- Homepage: https://github.com/honeo/easy-modal-window#readme
- Issues: https://github.com/honeo/easy-modal-window/issues
- npm.io page: https://npm.io/package/easy-modal-window

## Dependencies (4)

- [@honeo/check](https://npm.io/package/@honeo/check.md) ^1.0.2
- [make-element](https://npm.io/package/make-element.md) ^1.4.0
- [style-handle](https://npm.io/package/style-handle.md) ^1.1.0
- [@honeo/await-event](https://npm.io/package/@honeo/await-event.md) ^1.0.3

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 3.0.0 (latest) — 2017-07-22
- 2.2.3 — 2016-11-02
- 2.2.2 — 2016-11-02
- 2.2.1 — 2016-10-29
- 2.2.0 — 2016-10-29
- 2.1.3 — 2016-10-29
- 2.0.2 — 2016-10-23
- 2.0.1 — 2016-10-23
- 2.0.0 — 2016-10-23
- 1.1.1 — 2016-10-09
- 1.1.0 — 2016-06-06
- 1.0.1 — 2016-06-03
- 1.0.0 — 2016-06-03

## README

# easy-modal-window

## なにこれ
Flexbox実装のかんたんモーダルウィンドウ。

## 使い方
```sh
$ npm i easy-modal-window
```
```js
import ModalWindow from 'easy-modal-window';

const promise = ModalWindow.open(element);
```


## API

### .open(element or selector)
引数の要素orセレクタに一致する最初の要素をモーダルウィンドウで展開する。  
既に展開されていれば入れ替える。  
展開後に解決するpromiseを返す。
```js
const promise = await ModalWindow.open(element);

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


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


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


### .backgroundColor
展開中の背景色に使用する文字列。  
```js
ModalWindow.backgroundColor; // "rgba(0,0,0, 0.7)"
ModalWindow.backgroundColor = "red";
```

### .insertedElement
モーダルウィンドウで展開中の要素への参照。
```js
ModalWindow.insertedElement; // null
await ModalWindow.open(element);
ModalWindow.insertedElement; // element
```

### .isBackgroundBlur
モーダルウィンドウの展開中に背景をボカすか。
```js
ModalWindow.isBackgroundBlur; // true
ModalWindow.isBackgroundBlur = false;
```

### .isCloseOnBackgroundClick
背景クリックでモーダルウィンドウを閉じるか。  
```js
ModalWindow.isCloseOnBackgroundClick; // true
ModalWindow.isCloseOnBackgroundClick = false;
```

### .isCloseOnInsertedElement
展開中の要素クリックでもモーダルウィンドウを閉じるか。
```js
ModalWindow.isCloseOnInsertedElement; // false
ModalWindow.isCloseOnInsertedElement = true;
```


### .isOpen
モーダルウィンドウが展開中ならtrue、そうでなければfalseが入る。
読取専用。
```js
ModalWindow.isOpen; // false
await ModalWindow.open(element);
ModalWindow.isOpen; // true
```

### Events
* onopen
* onreplace
* onclose

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

---
_Source: https://npm.io/package/easy-modal-window · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._