Required files

The markup

The box wrapping element requires an ID eg #modalExample to be targeted, the two classes .modal and .toggle-fade, and the javascript module to be applied data-js-module="toggleElement"

The modal itself should be soley for toggling, and an inner element is required with the class .modal__bg where the positioning, alignment, background colour etc is/can be applied.

Another inner element is also required with the class .modal__content which is where the content can go.

To trigger opening the modal use the 'data-open-el' attribute and ID of the box data-open-el="modalExample"

To trigger closing the modal use the 'data-close-el' attribute and ID of the box data-close-el="modalExample"

Modal examples

The examples below illustrate how the modal could be used in various ways.

Inside the .modal__content element, a box can be added with the class .modal__box

Various other helper classes are also added to create the examples.

<button type="button" class="btn" data-open-el="modalConfirm">Open modal</button>

<div id="modalConfirm" class="modal toggle-fade" data-js-module="toggleElement">
    <div class="modal__bg">
        <div class="modal__content p-v-md container">
            <div class="modal__box p-a-lg text-centre">
                <p>[INSERT TEXT CONTENT]</p>
                <button type="button" class="btn" data-close-el="modalConfirm">Confirm</button>
            </div>
        </div>
    </div>
</div>