Modals

How It Works:

• Default JS scripts are applied. If different behavior is desired, then a modal can be opened programmatically defined later in the page.
• To open a modal, the trigger element must include the data-modal-target attribute with the modal's ID as its value (e.g., data-modal-target="#modalId"). However, if you're opening the modal programmatically, the trigger attribute must be removed.
• When closing a modal, the modal close trigger should include the data-modal-dismiss without any values. However, if you're closing the modal programmatically, the trigger attribute must be removed.
• Clicking on the modal backdrop and pressing the Escape key will automatically close the modal.
• When a modal is opened, the body scrolling is disabled by default to let the modal contents to scroll instead.
• Whenever possible, place your modal HTML in a top-level position to avoid code interference against other elements.

Default Modal

The default modal style that comes with a basic, predefined look and behavior. This kind of modal has specific default settings and styles, making it quick and easy to implement without extensive customization.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal1">
    Activate Demo Modal
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal1" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modal1Title">
            <button type="button" class="modal-close" aria-label="close" data-modal-dismiss></button>

            <div class="modal-header">
                <h2 id="modal1Title">
                    Modal Title Here
                </h2>
            </div>

            <div class="modal-body">
                ...
            </div>

            <div class="modal-footer">
                <button type="button" class="hpu-btn btn-sm btn-bg-warning" data-modal-dismiss>
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

Vertically Centered

Add the .centered class to .modal-dialog to vertically center a modal.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal2">
    Activate Center Modal
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal2" aria-hidden="true">
    <div class="modal-dialog centered" tabindex="-1">
        ...
    </div>
</div>

Remove Fading Animation

By default, everytime a modal is opened, it fades in from top to bottom, and fades out from bottom to top. To disable animation, just remove the .fade class from the parent .hpu-modal class.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal3">
    No Animation Modal
</button>

<!-- The Modal Itself -->
<div class="hpu-modal" id="modal3" aria-hidden="true">
    ...
</div>

Scrolling Long Contents

When the modal content is lengthy, the modal height expands to fit it, which can make the content inaccessible if it exceeds the viewport. Since scrolling is disabled by default when a modal is open, users are unable to scroll through extended content:

To address this issue, add the .scrollable class to the .modal-dialog class:

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal4">
    Scrollable Modal
</button>

<!-- The Modal Itself -->
<div class="hpu-modal" id="modal4" aria-hidden="true">
    <div class="modal-dialog scrollable" tabindex="-1">
        ...
    </div>
</div>

Modal Sizing

Modals sizes are also available to use. Just add the .sm for small, or lg for large modals to .modal-dialog class.

<!-- Modal Trigger Buttons -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal5a">
    Small Modal
</button>

<button type="button" class="hpu-btn btn-bg-2nd" data-modal-target="#modal5b">
    Default Size Modal
</button>

<button type="button" class="hpu-btn btn-bg-6th" data-modal-target="#modal5c">
    Large Modal
</button>

<!-- The Modals -->
<div class="hpu-modal fade" id="modal5a" aria-hidden="true">
    <div class="modal-dialog sm" tabindex="-1">
        ...
    </div>
</div>

<div class="hpu-modal fade" id="modal5b" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        ...
    </div>
</div>

<div class="hpu-modal fade" id="modal5c" aria-hidden="true">
    <div class="modal-dialog lg" tabindex="-1">
        ...
    </div>
</div>

Toggle Between Modals

You can open a new modal right after another one closes! Simply add both the data-modal-target attribute with the target value and the data-dismiss-modal attribute to the trigger element. This will close the first modal and immediately open the second one in sequence.

In the example below, the modal trigger for the next modal is in .modal-footer, but any modal dismiss trigger can be also a trigger for multi-modals.

<!-- Open First Modal -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal6a">
    No Animation Modal
</button>

<!-- The First Modal -->
<div class="hpu-modal fade" id="modal6a" aria-hidden="true">
    ...

    <div class="modal-footer">
        <button type="button" class="hpu-btn btn-sm btn-bg-success" data-modal-dismiss data-modal-target="#modal6b">
            Open Next Modal >>
        </button>
    </div>
</div>

<!-- The 2nd Modal -->
<div class="hpu-modal fade" id="modal6b" aria-hidden="true">
    ...

    <div class="modal-footer">
        <button type="button" class="hpu-btn btn-sm btn-bg-success" data-modal-dismiss data-modal-target="#modal6a">
            << Go Back to First Modal
        </button>
    </div>
</div>

Programmatic Modals

Modals can be activated or dismissed programmatically, with options available to customize their behavior. When using this approach, avoid defining data-modal-target and data-modal-dismiss attributes on trigger elements, as they’re not needed.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" id="openModal7">
    Open Modal with JS
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal7" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        ...
    </div>
</div>

let openModal7 = document.querySelector('#openModal7');
let modal7 = new HPU.Modal('#modal7');

openModal7.addEventListener('click', () => {
    modal7.showModal();
});

Modal Options

Set of configurable parameters that define the behavior and functionality of a modal. To change the modal's behavior, simply add an option right next to the selector as shown:

let modal = new HPU.Modal('#modalId', {options});

Event Methods

Functions or handlers that respond to event listeners and triggers on the modal. Simply call the methods to make the modal show or hide:

trigger.addEventListener('click', () => {
    modal.showModal(); // Use .hideModal(); method to hide the modal
});

Modal With no Backdrop and Escape Key Dismiss

In this example, backdrop and escape dismiss are disabled.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" id="openModal8">
    Modal with No Dismiss
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal8" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        ...
    </div>
</div>

let openModal8 = document.querySelector('#openModal8');
let modal8 = new HPU.Modal('#modal8', {
    backdropDismiss : false,
    escDismiss : false
});

openModal8.addEventListener('click', () => {
    modal8.showModal();
});

Modal With Callback Function

In this example, the option onModalShow is used for a callback function.

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" id="openModal9">
    Modal With a Callback
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal9" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        ...
    </div>
</div>

function fnForModal9() {
    alert('The modal with an alert callback funciton is opened!');
}

let openModal9 = document.querySelector('#openModal9');
let modal9 = new HPU.Modal('#modal9', {
    onModalShow : fnForModal9
});

openModal9.addEventListener('click', () => {
    modal9.showModal();
});

Modal Accessibility Features

Our modals are not only rich in features, but also built with accessibility in mind. As demonstrated in the code samples, please ensure your implementation includes the appropriate aria-*, tabindex, data-*, and role attributes.

Additionally, our modals support multiple interaction methods, including:

• Dismissing the modal with the Escape key
• Closing the modal by clicking outside the modal area
• Navigating and interacting with modal content using the Tab key (e.g., buttons, inputs, links, etc.)

More importantly, when a modal is opened, keyboard focus is trapped within the modal to support accessible navigation. While this focus-trap behavior can be disabled via configuration options above, it is strongly recommended keeping it enabled unless absolutely necessary.

Try interacting with the modal using the methods listed above to experience these accessibility features in action:

<!-- Modal Trigger Button -->
<button type="button" class="hpu-btn btn-bg-1st" data-modal-target="#modal10">
    Open Sesame
</button>

<!-- The Modal Itself -->
<div class="hpu-modal fade" id="modal10" aria-hidden="true">
    <div class="modal-dialog" tabindex="-1">
        ...
    </div>
</div>