Chose from wide variety of iconic animations and build any kind of notification popups, off-the-screen forms, beautiful nav bars and much more!
How to download modal.js:
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 this powerful onlien WYSIWYG editor.
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>
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.
<button> onclick="openModal()">Click to open modal</button>
<h1>I love modal.js</h1>
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.
Open modal.js file that you've downloaded.
Search for document.body.innerHTML in modal.js file.
You'll come along with following code snippet:
//HTML inside the modal and Input CSS animation tag
`<div class="modal" id="myModal">
<div class="modal-content-area animated shake">
<i class="close-button" aria-hidden="true">✖</i>
<p>It's shahzaib here.</p>
//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.
shake is input animation, while wobble is output animation.
You can make these changes in modal.js file to change animations and HTML content of modal window.
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.