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: Watch Online

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 file for details