Modal

Simple modal.

Install

Node

npm install @celsowhite/modal --save

Browser

Download the library file from dist/modal.umd.js and include it in your sites files.

Setup

Node

import modal from '@celsowhite/modal';
modal();

Browser

<script src="dist/modal.umd.js"></script>
<script>
    modal();
</script>

Usage

To use the script you'll need to include two elements in your markup. A trigger and a modal.

Trigger

The trigger class can be used on any element and multiple times on the page. Each trigger element must include the data-modal-id attribute that specifies which modal it opens. Optionally, you can include a modal-content-to-show element which will be the content that is injected into the modal.

<a class="modal-trigger" data-modal-id="content-modal" href="#">
    Content Modal
    <div class="modal-content-to-show hide">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</a>

Modal

The modal will open any time a user clicks a trigger. Content will be injected into the modal only if the trigger that opened it has a modal-content-to-show element. If a modal-close element is not a child of the modal itself then you need to add data-modal-id so it knows which modal to close.

Note: The transparent layer element is not required. It's a good way to close the modal by clicking out of the content box.

<div class="modal" id="content-modal">
    <div class="modal__transparent-layer modal-close"></div>
    <div class="modal__content"></div>
    <a class="modal-close modal__close-icon" href="#">Close</a>
</div>

Styling

This library only handles the modal open/close script functionality. You can view/use my sample styling in demo/demo.css.

Options

The library includes default class names for elements. Those names can be customized to match your markup.

modal({
    modalElement: '.modal', // The modal element.
    modalTriggerElement: '.modal-trigger', // The element that will trigger a modal to open.
    modalCloseElement: '.modal-close', // The element that will trigger a modal to close. Must be a child of the modal element.
    modalContentElement: '.modal__content', // The content element that will be populated when the modal is opened.
    modalContents: '.modal-content-to-show', // The modal contents that will appear when a specific trigger is clicked. Must be a child of the modal trigger element.
    modalOpenClass: 'modal--is-open' // Class that is toggled on the modal element when the modal is open/closed.
})

Events

You can listen for the open/close events on each modal.

var modals = document.querySelectorAll('.modal');

modals.forEach(function(modal){

    modal.addEventListener('open', function (e) {
        console.log(e.target);
    });

    modal.addEventListener('close', function (e) {
        console.log(e.target);
    });

});

License

MIT License © Celso White