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
<!-- Basic Modal -->
<div class="modal-wrapper">
<div class="modal grid-ctr">
<button class="card-icon-btn icon-btn rd-bdr close-btn modal-close-btn">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<img class="h-15rm w-15rm" src="assets/shopping-cart.png" alt="shopping-cart">
<p>Thanks for shopping!</p>
<p class="sub-heading">Your order will take 1-2 hours to get confirmed.</p>
<button class="btn primary-btn m-1 w-50p">Back to site</button>
</div>
</div>
Live Modal Example
Click on button to see the Modal.
Code Snippets
HTML snippet
<div class="modal-wrapper modal-wrapper-example grid-ctr">
<div class="modal grid-ctr">
<button class="card-icon-btn icon-btn rd-bdr close-btn modal-close-btn example-modal-close-btn">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<img class="h-15rm w-15rm" src="shopping-cart.png" alt="shopping-cart">
<p>Thanks for shopping!</p>
<p class="sub-heading">Your order will take 1-2 hours to get confirmed.</p>
<button class="btn primary-btn example-modal-close-btn m-1 w-50p">Back to site</button>
</div>
</div>
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));