<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal outside click listener</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="modal-overlay" id="overlay">
        <div class="modal" id="modal">
            <div class="modal-header">
                Modal title
            </div>
            <div class="modal-content">
                content
            </div>
            <div class="modal-footer">
                footer
            </div>
        </div>
    </div>

    <button onclick="openModal()">Open modal</button>


    <script src="index.js"></script>
</body>

</html>
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.342);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.modal {
  margin: 1rem;
  width: 100%;
  max-width: 600px;
  height: auto;
  min-height: 300px;
  background-color: white;
  border-radius: 11px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  -webkit-animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media only screen and (max-width: 600px) {
  .modal {
    height: 50%;
    width: 100vw;

  }
}

.modal-header {
  background-color: rgba(0, 0, 0, 0.041);
  padding: 1rem;
}
.modal-content {
  padding: 0.5rem 1rem;
  flex: 1;
}
.modal-footer {
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.041);
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

const handleClickOutside = (event) => {
    let overlay = document.getElementById("overlay");
    let modal = document.getElementById("modal");
    if (!modal.contains(event.target)) {
        modal.style.display = 'none';
        overlay.style.display = 'none';
        document.removeEventListener('click', handleClickOutside, false);
    }
}

const openModal = () => {
    let overlay = document.getElementById("overlay");
    let modal = document.getElementById("modal");
    overlay.style.display = 'flex'
    modal.style.display = 'flex'
    setTimeout(() => { document.addEventListener('click', handleClickOutside, false) }, 200);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.