Simple Modal Popup in Vanilla Javascript – Modal.js

Looking for simple and easy to use solution for modal popup? The Modal.js plugin created using vanilla javascript. It is pretty lightweight and developer-friendly.

You can easily apply modal window popup on link or image to show a larger version of the photo or show more content. It’s super easy to customize and can implement any kind of website.

Furthermore, you can create unlimited confirm box with yes/no option that can be used to verify or accept something from the user on the web page.

The plugin comes with handy features such as close button and allows to close window by pressing ESC key. When the user clicks on a button the modal box open and shows a dim background color.

Modal Options:

The plugin comes with handy options which allow you to easily customize it. Simply change the values in the Javascript function and you are done.

• auto_open: (boolean)
• class: (string)
• close_button: (boolean)
• content: (string)
• center: (boolean)

How to use Vanilla Modal Popup

To start using the plugin you need to add two important files. Let’s Include the minified version of the Modal.js and Modal.css on the page.

<link rel="stylesheet" href="css/modal.min.css">
<script src="js/modal.min.js"></script>

Create a new button or link with some text. You can also add img and wrap with the link.

<button>Open modal</button>

Next, We will call the function to initialize the modal box. It supports the content attribute which all to define your own modal content (It support HTML as well)

new Modal({
    content: '<h2>This is my modal box</h2>'
});

By default, the modal window will auto appear on document ready. To open the modal window manually, just set the auto_open to false.

new Modal({
    content: '<h2>This is modal box</h2>',
    auto_open: true
});

You can show or hide the close button by setting the close_button attribute value true or false.

new Modal({
    content: '<h2>This is modal box</h2>',
    close_button: true
});

If you having an issue in centering the modal window then you can set center true to make it algin centered on the screen.

new Modal({
    content: '<h2>This is modal box</h2>',
    center: true
});

The default modal popup box comes with very basic styling but you can add your own class to style it as you wish.

new Modal({
    content: '<h2>This is modal box</h2>',
    class: 'myCustomClass'
});