Pure-modal

A lightweight, accessible, vanilla JavaScript modal component.

Demo and documentation

https://romanslonov.github.io/pure-modal/

Basic usage

1. Add modal markup on your page and give it unique ID.

<div class="modal" id="modal1" role="dialog" aria-labelledby="modal-1" aria-describedby="basic-modal" tabindex="-1" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title 1</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                    <svg width="16" height="16" viewBox="0 0 40 40">
                        <path stroke-linecap="round" class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" stroke="#000" fill="transparent" stroke-width="5"></path>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                Content of modal 1
            </div>
            <div class="modal-footer">
                <div class="mr-xs">
                    <button data-dismiss="modal" aria-label="Close">Close</button>
                </div>
                <button>Save changes</button>
            </div>
        </div>
    </div>
</div>

2. Init modal instance and pass unqiue ID of your modal.

const modal1 = new Modal('modal1');
modal1.init();

3. Add trigger to open the modal.

<button data-toggle="modal" data-target="modal1">Modal 1</button>

Done! 🎉

API

Options

Name	type	Default	Description
transition	Boolean	true	Initialize PureModal instance. Add event listeners.
beforeOpen	Function	null	A callback that will be called before opening the modal.
onOpen	Function	null	A callback that will be called after the modal is fully opened.
beforeClose	Function	null	A callback that will be called before closing the modal.
onClose	Function	null	A callback that will be called after the modal is fully closed.

Methods

Name	Description
init()	Initialize PureModal instance. Add event listeners.
destroy()	Destroy all event listeners. Useful when building SPA.
open()	Call to open modal manually.
close()	Call to close modal manually.