Press "Enter" to skip to content

Simple and Lightweight Vanilla Model Window That’s Easy To Expand

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

OptionValue
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

MethodDescription
beforeOpenCalled right before the modal will open
openedCalled when the modal is completely visible
beforeCloseCalled right before the modal will close
closedCalled 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *