Modal
The modal component provides a basis for creating dialogs, popovers, lightboxes to provide information to user.
Basic Modal
Modal component can be created by using modal class inside <div> tag. (e.g.
class="modal"). For wrapper, use modal-wrapper class & for close button, add
modal-close-btn class.
Thanks for shopping!
Your order will take 1-2 hours to get confirmed.
Code Snippets
Thanks for shopping!
Your order will take 1-2 hours to get confirmed.
Live Modal Example
Click on button to see the Modal.
Code Snippets
HTML snippet
Thanks for shopping!
Your order will take 1-2 hours to get confirmed.
JS snippet
/*-----------MODAL DEMO---------------------*/
const openModalBtn = document.querySelector(".open-modal-btn");
const closeModalBtn = document.querySelectorAll(".example-modal-close-btn");
const modalWrapper = document.querySelector(".modal-wrapper-example");
const openModal = () => {
modalWrapper.classList.add("show-modal");
document.body.style.overflow = "hidden";
};
const closeModal = () => {
modalWrapper.classList.remove("show-modal");
document.body.style.overflow = "visible";
};
openModalBtn.addEventListener("click", openModal);
closeModalBtn.forEach((closeBtn) => closeBtn.addEventListener("click", closeModal));