// take refernece of html elements const simpleModalWrapper = document.querySelector("#simple-modal-wrapper"); const simpleModalDemoBtn = document.querySelector("#simple-modal-demo-btn"); const actionBtns = document.querySelectorAll(".btn-action"); const body = document.querySelector("body"); // event listener for live demo button for simple modal simpleModalDemoBtn.addEventListener("click", () => { simpleModalWrapper.style.display = "flex"; }); // event listeners for buttons in modal // here for example i just closed modal on click on action , // you can perform any action you want to do on click of action buttons actionBtns.forEach(btn => { btn.addEventListener("click", () => { if (btn.parentNode.id === "simple-modal-buttons") { simpleModalWrapper.style.display = "none"; } }); }); //event listener for closing modal when it is open and we click anywhere on screen/window window.addEventListener("click", event => { if (event.target === simpleModalWrapper) { simpleModalWrapper.style.display = "none"; } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter