Modal.js is a very simple and developer-friendly modal window written in JavaScript and CSS/CSS3. The activated modular window can be closed by pressing the ESC key or clicking the X button and overlaying the background.
best javascript modal library, best modal library, bootstrap modal, welcome modal popup, jquery modal popup, modal popup plugin, bootstrap modal popup example
How to make use of it:
Include the mini version of Modal.js on the page.
<link rel="stylesheet" href="css/modal.min.css"> <script src="js/modal.min.js"></script>
Create a new modal window and select your modal content.
new Modal({
content: '<h2>test</h2>'
});By default, the modal window will automatically appear on the ready-made document.
new Modal({
content: '<h2>test</h2>',
auto_open: true
});Decide if you want to show the close button or not.
new Modal({
content: '<h2>test</h2>',
close_button: true
});Always keep the modal window in the middle of the screen.
new Modal({
content: '<h2>test</h2>',
center: true
});Add additional CSS classes to the modal window. Useful for adding your own styles to the modal window.
new Modal({
content: '<h2>test</h2>',
class: 'myClass'
});All options are optional
| Option | Value |
|---|---|
auto_open | (Bool) Should the modal automaticly open |
class | (String) Extra class that will be added to the modal |
close_button | (Bool) Should the modal contain a close button |
content | (String) Content of the modal |
center | (Bool) If true, the modal will automaticly be centered |
confirm_button | (String) Text that will be displayed in the button. Leave empty if you don’t want a confirm button |
confirm_button_class_names | (String) Class names that will be added to the confirm button |
Lifecycle methods
| Method | Description |
|---|---|
beforeOpen | Called right before the modal will open |
opened | Called when the modal is completely visible |
beforeClose | Called right before the modal will close |
closed | Called when the modal has closed. Comes with an argument closed_via_confirm_button which is true when the modal is closed via the confirm button |
Handy Modal Window Library, Modal.js Plugin/Github, multiple modal popup jquery
See Demo And Download
Official Website(Guidovv): Click Here
This superior jQuery/javascript plugin is developed by Guidovv. For extra Advanced Usages, please go to the official website.