A modal is a small window that appears over the main window to grab the user's attention. A modal displays important information on actions that the user has to perform before working with the main window.
Elixir offers a Simple Modal some text and some action buttons.
A simple modal consists of a text conveying information along with action buttons.
To generate a modal use the base class modal-container and active-modal.
Add the modal text and action buttons within the modal-content container. And use the following classes - modal-text and modal-action-buttons - for the modal text and acrion buttons respectively.
Please note: For displaying the active modal and disabling the scroll in the body you can add the following code -
body {
overflow: hidden;
}
Copy the code below to use a simple modal
<div class="modal-container active-modal">
<div class="modal-content p-1">
<div class="modal-text text-reg py-1">
Discard draft?
</div>
<button class="btn btn-icon btn-primary btn-modal-close">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-action-buttons">
<button class="btn btn-primary btn-outline px-0-75 py-0-25 text-sm">Cancel</button>
<button class="btn btn-primary px-0-75 py-0-25 text-sm">Discard</button>
</div>
</div>
</div>
Copy the code below to for the close button click JavaScript functionality.
/* Get reference to the modal close button */
const modalCloseButton = document.querySelector('.btn-modal-close');
/* Event listener that listens for modal close button */
modalCloseButton.addEventListener('click', closeModal);
/* Handler that handles modal close button click */
function closeModal(e) {
const modalContainer = e.target.parentElement.parentElement;
modalContainer.classList.remove('active-modal');
document.querySelector('body').style.overflow = 'auto';
}