// take refernece of html elements const listModalWrapper = document.querySelector("#list-modal-wrapper"); const listModalDemoBtn = document.querySelector("#list-modal-demo-btn"); const actionBtns = document.querySelectorAll(".btn-action"); const body = document.querySelector("body"); // event listener for live demo button for list modal listModalDemoBtn.addEventListener("click", () => { listModalWrapper.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 === "list-modal-buttons") { listModalWrapper.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 === listModalWrapper) { listModalWrapper.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