.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 24rem; border-radius: 0.5rem; } .close-button { float: right; width: 1rem; line-height: 1rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #0099c7; } .close-button:hover { background-color: #0eb7e6; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .trigger { border: none; background-color: transparent; font-size: 12px; cursor: pointer; display: inline-block; color: white; font-weight: bold; } var modal = document.querySelector(".modal"); var trigger = document.querySelector(".trigger"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick);