simple modal js code

PHOTO EMBED

Tue Feb 22 2022 20:39:53 GMT+0000 (UTC)

Saved by @viresh #html

// 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";
  }
});
content_copyCOPY