<button class="modal-initialise">Modal</button> <div id="overlay"><div> <div class="modal"> <div class="modal-header"> Example modal <button class="modal-close"> <img src="close-white24.svg" /> </button> </div> <div class="modal-content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit vero blanditiis delectus repellendus ducimus, adipisci totam temporibus nihil commodi quod expedita, sit, fugiat quibusdam voluptas. </div> <div class="action-btn"> <button class="scl-btn scl-btn-primary">Action 1</button> <button class="scl-btn scl-btn-secondary">Action 2</button> </div> </div> javascript code: const modalInitialise = document.querySelector(".modal-initialise"); const modalClose = document.querySelector(".modal-close"); const modal = document.querySelector(".modal"); modalInitialise.addEventListener("click", () => { document.querySelector(".modal").style.display = "block"; document.querySelector("#overlay").style.display = "block"; document.querySelector("#overlay").style.backgroundColor = "rgba(0, 0, 0, 0.5)"; }); modalClose.addEventListener("click", () => { document.querySelector(".modal").style.display = "none"; document.querySelector("#overlay").style.display = "none"; }); document.addEventListener("mouseup", function (e) { var container = document.querySelector(".modal"); if (!container.contains(e.target)) { container.style.display = "none"; document.querySelector("#overlay").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