# easy-modal-alert-box

> Easy Modal / Alert Box with Vanilla JS and CSS3

Latest version **1.0.1** (published 2021-01-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install easy-modal-alert-box
pnpm add easy-modal-alert-box
yarn add easy-modal-alert-box
bun add easy-modal-alert-box
```

## 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 | 1.0.1 |
| Published | 2021-01-04 |
| First published | 2020-12-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yasin Demir |
| Maintainers | ysndmr |
| Keywords | vanilla, js, css3, alert-box, modal-box, plugin, vanilla, js, plugin |

## Links

- npm: https://www.npmjs.com/package/easy-modal-alert-box
- Repository: https://github.com/ysndmr/https-ysndmr.github.io-easy-modal-and-alertbox-
- Homepage: https://github.com/ysndmr/https-ysndmr.github.io-easy-modal-and-alertbox-#readme
- Issues: https://github.com/ysndmr/https-ysndmr.github.io-easy-modal-and-alertbox-/issues
- npm.io page: https://npm.io/package/easy-modal-alert-box

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-01-04
- 1.0.0 — 2020-12-24

## README

# Easy Modal / Alert Box

Easy Modal Box is a modern dialog library which is highly configurable, clear, simple and easily styleable works on mobile devices, and can be customized to match your style.

Generic Javascript plugin with different modal window appearances.

## Overview

Check out the some following examples alert / modal box opening:

Technologies used: HTML5, Sass, Vanilla JS ES6.

Demo: <a href="http://ysndmr.com/easy-modal-alert-box/index.html">Watch Online</a>

### Features

Responsive, Customizable and clean code

### Include the files
```
<link href="easy-modal.min.css" rel="stylesheet">
<script src="easy-modal.min.js"></script>
```


Call the plugin when the body is load:

```
// Instantiate new modal

var modal = new SimplyModal({
      title: "Modal Box",
      content: "Modal Description",
      autoOpen: false,
      closeButton: true,
      type: "modal",
      className: ['fadein', 'slideRight', 'slideBottom', 'fall', 'flid3d', 'flid3dVertical', 'scale', 'folding', 'rotateLeft'],
      maxWidth: '',
      minWidth: '',
      overlay: true,
      setTimeOut: false,
      overlayClass: 'easy-modal-overlay',
      modalTypeClass: ['error', 'info', 'warn', 'succes'],
      closeText: 'X'

});
 modal.open();
}
```
| Name  | Type | Default  | Description |
| :---          |     :---:      |   :---: |  :---  |
| title  | string  | Modal Box title  | Set the your modal box title (optional). If yopu dont want title you can set '' string.  |
| content | string | Modal Box description | Set the your modal box description / spot (optional). If yopu dont want title you can set '' string. |
| autoOpen | integer | false | Set the automatic open immediately. |
| type | string | modal | Set the template type ('modal' or 'alert' box) |
| closeButton | boolean | true | You can set close button or not. If you dont want just change with false. |
| closeText | string | X | If you want you can change with any string ( Close, open, Yes or No ) |
| maxWidth  integer |'' | Set maximum width of your box. Not requried. |
| minWidth | integer | '' | Set minumum width of your box. Not requried. |
| overlay | boolean | true | For use overlay. If you dont want you can change with false. |
| setTimeout | integer | false | Set the automatic close after millisecond. |
| overlayClass | string | easy-modal-overlay | You can change with your own class. |
| modalTypeClass | array | default | For which purpose you can choose it. 'error', 'info', 'warn', 'succes'. |
| className | ['fadein', 'slideRight', 'slideBottom', 'fall', 'flid3d', 'flid3dVertical', 'scale', 'folding', 'rotateLeft'],



## Css3 Effects
'fadein', 'slideRight', 'slideBottom', 'fall', 'flid3d', 'flid3dVertical', 'scale', 'folding', 'rotateLeft'



## Author

* **Yasin Demir** 

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

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