Handy Modal Window Library – Modal.js

A pretty simple, and developer-friendly modal window written in pure JavaScript and CSS/CSS3.

The activated modal window can be closed by pressing the ESC key or clicking the X button & background overlay.

How to use it:

Include the minified version of the 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 define your own modal content (html is supported as well).

new Modal({
    content: '<h2>test</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>test</h2>',
    auto_open: true
});

Decide whether to show the close button or not.

new Modal({
    content: '<h2>test</h2>',
    close_button: true
});

Make the modal window always be centered on the screen. Default: false.

new Modal({
    content: '<h2>test</h2>',
    center: true
});

Add extra CSS class(es) to the modal window. Useful for adding your own styles to the modal window.

new Modal({
    content: '<h2>test</h2>',
    class: 'myClass'
});

Changelog:

09/30/2021

• Added minified version