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!
You can create your interactive modal online and download it on the fly. Visit modal.js website.
- Chose your input animation from drop down.
- Chose your output animation from drop down.
- Add/modify the HTML that you want to render inside the modal window.
- Add/modify the CSS to modify the modal window styling and the content inside the modal.
- Test how your modal will look like in your application using modal.js powerful online WYSIWYG editor.
- Download modal.js source file when you're satisfied with the look and content of modal window.
- After you've downloaded
modal.jsfile, include this JavaScript file at the bottom of HTML content, as shown below.
<body>
...
<h1>I love modal.js</h1>
...
</body>
<script src="./modal.js"></script>
- Then, you've to call the
openModal()function to open the modal window. - There can be various ways to trigger
openModal()function, let's trigger it using a button.
<body>
...
<button> onclick="openModal()">Click to open modal</button>
<h1>I love modal.js</h1>
...
</body>
<script src="./modal.js"></script>
That's it! Your modal window should work like a breeze now.
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.
- Open
modal.jsfile that you've downloaded. - Search for
document.body.innerHTMLinmodal.js file. - You'll come along with following code snippet:
...
//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>
</div>
</div>`;
//Output CSS animation name
classesToHide = ['modal-content-area', 'animated', 'wobble'];
//Input CSS animation tag
classesToRetainOriginal = ['modal-content-area', 'animated', 'shake'];
...
- Modal HTML code and both, input, output animation tags are highlighted in above code.
shakeis input animation, whilewobbleis output animation.- You can make these changes in
modal.jsfile to change animations and HTML content of modal window.
Now, after HTML content and animations, next thing to modify is CSS styling of modal window and the HTML content within modal window.
- Open
modal.jsfile. - Search for
$modalCSSfirst occurance in file. - Here's how the code looks like:
...
$outputAnimation: 'wobble',
$modalCSS: `.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow:auto;
}
...
That's it. Now, you can add or remove CSS style tags here and thus modify modal window styling.
That's complicated! But there's a workaround.
- Finalize your 2nd modal and download
modal.jsfile. - Now go into file and find and replace all JavaScript variables,
function names, e.g. replace
openModal()with something likeopenModalSecond(). - Replace Style classes of only modal related CSS, e.g. replace
.modalwith.modalSecond. - Through this way, you can add as many distinct modal windows as you want and trigger them using their respective triggering functions.
If you find any error, please raise an Issue and I'll fix it.
modal.js is written by Shahzaib Khalid
modal.js is licensed under the MIT License.
Copyright (c) 2017 Shahzaib Khalid