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.