The Simplest Modal Component In Pure JavaScript

Preview:

Description:

An ultra-light JavaScript plugin that helps you create modal windows for your web applications.

Features:

• 3 sizes: normal, small and large.
• Can be triggered by any element.
• Allows to close modal window with ‘data-dismiss’ attribute or when the backdrop is clicked.

How to use it:

Load the style sheet modal.css and JS file modal.js in the html page.

<link href="modal.css" rel="stylesheet">
<script src="modal.js"></script>

Create modal content as follows:

<div id="simpleModal_1" class="modal">
  <div class="modal-window">
      <h3>Normal Modal</h3>
  </div>
</div>
<div id="simpleModal_2" class="modal">
  <div class="modal-window large">
      <h3>Large Modal</h3>
  </div>
</div>
<div id="simpleModal_3" class="modal">
  <div class="modal-window small">
      <h3>Small Modal</h3>
  </div>
</div>

Create modal trigger elements:

<button data-target="simpleModal_1" data-toggle="modal">Basic Modal</button>
<button data-target="simpleModal_2" data-toggle="modal">Large Modal</button>
<button data-target="simpleModal_3" data-toggle="modal">Small Modal</button>

If you want to insert a close button inside the modal window:

<div id="simpleModal_n" class="modal">
  <div class="modal-window">
    <h3>Dismiss with a custom button</h3>
    <button data-dismiss="modal">Close</button>
  </div>
</div>

Changelog:

09/21/2018

• Fixed problem that prevent click works in other elements