simplify mask

Install

install @buuug7/simplify-mask package via npm, and then import from @buuug7/simplify-mask/index.css file.

npm install @buuug7/simplify-mask

Demo examples

Usage

interact with javascript

document.querySelector("#openMask").addEventListener("click", () => {
  let { instance, close } = showMask();

  // close mask 
  instance.addEventListener("click", () => {
    close();
  });
});

function showMask() {
  const mask = document.createElement("div");
  mask.className = "mask";
  document.body.appendChild(mask);
  document.body.style.overflow = "hidden";
  setTimeout(() => {
    mask.classList.add("show");
  }, 0);

  const close = (() => {
    // remove mask after transition end
    mask.addEventListener("transitionend", (e) => {
      const target = e.target;
      const contains = target.classList.contains("hide");
      if (contains) {
        document.body.removeChild(mask);
        document.body.style.overflow = "auto";
      }
    });

    return () => {
      mask.classList.remove("show");
      mask.classList.add("hide");
    };
  })();

  return { instance: mask, close };
}