The Simplest Modal Component In Pure JavaScript

Category: Javascript , Modal & Popup | September 21, 2018
Views Total:10,503 views
Official Page:Go to website
Last Update:September 21, 2018


The Simplest Modal Component In Pure JavaScript


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


  • 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 id="simpleModal_2" class="modal">
  <div class="modal-window large">
      <h3>Large Modal</h3>
<div id="simpleModal_3" class="modal">
  <div class="modal-window small">
      <h3>Small Modal</h3>

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>



  • Fixed problem that prevent click works in other elements

You Might Be Interested In:

Leave a Reply