Modal

A modal (also called a modal window or lightbox) is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it.

Example of Modal

Dialog Header

Dialog body text

<div class="dialog-wrapper">
<div class="dialog alert">
<div class="dialog__header my-1 p-1">
<h3>Dialog Header</h3>
</div>
<div class="dialog__body my-1 p-1">
<p>Dialog body text</p>
</div>
<div class="dialog__footer txt-right my-1 p-1">
<button class="dialog-btn px-sm">Action 1</button>
<button class="dialog-btn px-sm">Action 1</button>
</div>
</div>
</div>
view raw modal-example.html hosted with ❤ by GitHub

Live Modal Demo

Click on the below button to see the modal

<div class="dialog-wrapper" id="example-modal">
<div class="dialog alert">
<div class="dialog__header my-1 p-1">
<h3>Dialog Header</h3>
</div>
<div class="dialog__body my-1 p-1">
<p>Dialog body text</p>
</div>
<div class="dialog__footer txt-right my-1 p-1">
<button class="dialog-btn px-sm">Action 1</button>
<button class="dialog-btn px-sm">Action 1</button>
</div>
<button class="close-modal" id="close-modal-demo">
<i class="fas fa-times" title="close"></i>
</button>
</div>
</div>
view raw demo-modal.html hosted with ❤ by GitHub
JavaScript
const modalCTA = document.querySelector(".modal-cta");
const modalCloseBtn = document.querySelector("#close-modal-demo");
const demoModal = document.querySelector("#example-modal");
modalCTA.addEventListener("click", showModal);
modalCloseBtn.addEventListener("click", hideModal);
function showModal() {
demoModal.classList.add("show");
document.body.style.position = "fixed";
}
function hideModal() {
demoModal.classList.remove("show");
document.body.style.position = "static";
}
view raw demo-modal.js hosted with ❤ by GitHub

Dialog Header

Dialog body text

List Navigation