Modal & Dialog Snippet Generator

Creates responsive modals or popups with configurable triggers and animations.

1. HTML

<!-- The button to open the modal -->
<button id="openModalBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h2>Modal Title</h2>
    <p>This is the modal content. You can put any HTML here.</p>
  </div>
</div>

2. CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  animation: slideIn 0.3s;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes slideIn {
  from {top: -50px; opacity: 0}
  to {top: 0; opacity: 1}
}

3. JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById("myModal");
    const btn = document.getElementById("openModalBtn");
    const span = document.getElementsByClassName("close-btn")[0];

    btn.onclick = () => { modal.style.display = "block"; }
    span.onclick = () => { modal.style.display = "none"; }

    window.onclick = (event) => {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    
    window.onkeydown = (event) => {
        if (event.key === "Escape" && modal.style.display === "block") {
             modal.style.display = "none";
        }
    }
});

Modal & Dialog Snippet Generator

1. HTML

2. CSS

3. JavaScript

Related Reading

How do I use this code?

How can I close the modal?

Is this modal accessible?