Your favourite modal windows

VANILLA JS & CSS3 & RESPONSIVE

Versatile modal windows that you'll love.
Compact size, excellent performance, flexibility in settings.
Works in all modern browsers.

Usage

Download and connect the files on the page. Add the markup in a convenient place in the code. Done!

<html>
<head>
    <title>Modal</title>
    <link rel="stylesheet" href="/css/modal.css"/>
</head>
<body>
    <!-- Add a button to open with a data-modal attribute -->
    <a class="button" data-modal="modal">Show modal</a>
    <!-- Modal window template -->
    <div id="modal" class="modal-content">
        <!-- Modal content -->
        <h1>Hello World<h1>
        <p>I am the new modal window that is so easy to create.<p>
    </div>
    <script src="/js/modal.js"></script>
    <script>modal.init()</script>
</body>
</html>
Check it

By default, after initialization, the modal window code is added to the end of the body tag, but if you need to place it elsewhere, you must add an empty element with the .modal-here class in the place where the window code should be located.

<div class="modal-here"><!-- Modal initialized here --></div>

Modal window template after initialization:

<div id="modal" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-outer">
        <div class="modal-inner">
            <div class="modal-window">
                <!-- Modal content -->
                <!-- Modal closer -->
                <a class="modal-close"></a>
            </div>
        </div>
    </div>
</div>

Customization

Basic settings

To change the basic settings, use CSS Custom Properties:

:root {
    /* Default values */
    --modal-background: #fff;
    --modal-box-shadow: 0 6px 30px rgba(0,0,0,.25);
    --modal-border-radius: 8px;
    --modal-closer-color: #ccc;
    --modal-overlay-background-color: rgba(0,0,0,.4);
}

Adding classes

<div id="modal" class="modal-content class1 class2">
    <!-- Modal content -->
</div>

After initialization, the classes class1 and class2 will be added to the template code:

<div id="modal" class="modal class1 class2">
    <div class="modal-overlay"></div>
    <div class="modal-outer">
        <div class="modal-inner">
            <div class="modal-window">
                <!-- Modal content -->
                <!-- Modal closer -->
                <a class="modal-close"></a>
            </div>
        </div>
    </div>
</div>

Blue window Rounded window

Helper classes

// Classes:
// max       — max-width 100%
// max400    — max-width 400px
// max500    — max-width 500px
// max600    — max-width 600px
// max700    — max-width 700px
// max800    — max-width 800px
    
<div id="modal" class="modal-content [helper-class]">
    <!-- Modal content -->
</div>

max max400 max500 max600 max700 max800

Effects

// Classes:
// effect-in       — zoom in
// effect-out      — zoom out
// effect-up       — slide up
// effect-down     — slide down
// effect-left     — slide left
// effect-right    — slide right

<div id="modal" class="modal-content [effect-class]">
    <!-- Modal content -->
</div>

effect-in effect-out effect-up effect-down effect-left effect-right

Effects are built with css transitions and they are easy to add.

API & Events

After initialization, the window can be managed and events can be monitored.

<div id="modal" class="modal-content [class]">
    <!-- Modal content -->
</div>

<script>
    modal.show('modal');  // show modal window
    modal.hide('modal');  // hide modal window

    // Events:
    // modal:ready
    // modal:open
    // modal:close
    
    const m = document.querySelector('#modal');
    m.addEventListener('modal:ready', (event) => {
        console.log('Modal ready')
    });
    m.addEventListener('modal:open', (event) => {
        console.log('Modal opened')
    });
    m.addEventListener('modal:close', (event) => {
        console.log('Modal closed')
    })
</script>

Open modal with API