modal.js is the most easiest way to create, add and modify
interactive modal windows to a JavaScript applications.

Chose from wide variety of iconic animations and build any kind of
notification popups, off-the-screen forms, beautiful nav bars and much more!

Download Section

How to download modal.js:

  1. Chose your input animation from drop down.
  2. Chose your output animation from drop down.
  3. Add/modify the HTML that you want to render inside the modal window.
  4. Add/modify the CSS to modify the modal window styling and the content inside the modal.
  5. Test how your modal will look like in your application using this powerful onlien WYSIWYG editor.
  6. Download modal.js source file when you're satisfied with the look and content of modal window.

HTML for Modal

CSS for Modal

Note that some browsers and OS environment may complain that modal.js is a potential risk to your computer and they say so because modal.js is generated on client-side and publisher (me) is not verified on client side. So you can download and use only if you trust the source and meanwhile can read the content of modal.js yourself.


How to use modal.js in your app

    <h1>I love modal.js</h1>
  <script src="./modal.js"></script>

    <button> onclick="openModal()">Click to open modal</button>
    <h1>I love modal.js</h1>
  <script src="./modal.js"></script>

That's it! Your modal window should work like a breeze now.

How to modify modal.js HTML and animations after downloading

Now, theres an interesting but common case, you've downloaded the modal.js file, but after downloading the file, you've found to modify either the HTML being rendered inside the modal or the style of modal itself.

  //HTML inside the modal and Input CSS animation tag
  document.body.innerHTML += 
    `<div class="modal" id="myModal">
      <div class="modal-content-area animated shake">
        <i class="close-button" aria-hidden="true">✖</i>
          <h1>Hello world</h1>
          <p>It's shahzaib here.</p>
          <p>Download resume</p>
  //Output CSS animation name              
  classesToHide = ['modal-content-area', 'animated', 'wobble'];
  //Input CSS animation tag
  classesToRetainOriginal = ['modal-content-area', 'animated', 'shake'];

How to modify modal.js styling after downloading

Now, after HTML content and animations, next thing to modify is CSS styling of modal window and the HTML content within modal window.

  $outputAnimation: 'wobble',
  $modalCSS: `.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);

That's it. Now, you can add or remove CSS style tags here and thus modify modal window styling.

What if I want to add more than one modal window on same page?

That's complicated! But there's a workaround.


modal.js is written by Shahzaib Khalid

modal.js is being maintained on GitHub


modal.js is licensed under the MIT License.

Copyright (c) 2017 Shahzaib Khalid