How To Create a Modal Box

Learn how to show a pop-up box (a modal) on top of the page, with a dark background behind it.

Step 1: The HTML

The modal has two parts: the overlay that covers the whole screen, and the box inside it.

Example

html

<button id="openBtn">Show offer</button>

<div class="overlay" id="modal">
  <div class="modal-box">
    <button class="close" id="closeBtn">&times;</button>
    <h2>Eid Offer!</h2>
    <p>Get 20% off on all courses this week.</p>
  </div>
</div>

× shows a neat "x" symbol for the close button.

Step 2: The CSS

position: fixed with inset: 0 makes the overlay cover the full window. Flexbox centres the box. The overlay is hidden until it has the open class.

Example

css

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.modal-box { background: white; padding: 24px; border-radius: 10px; width: 90%; max-width: 400px; position: relative; }

Step 3: The JavaScript

We open the modal with one button, and close it three ways: the close button, a click on the dark overlay, or the Escape key.

Example

javascript

const modal = document.getElementById("modal");
document.getElementById("openBtn").onclick = function () { modal.classList.add("open"); };
document.getElementById("closeBtn").onclick = function () { modal.classList.remove("open"); };
modal.addEventListener("click", function (e) {
  if (e.target === modal) modal.classList.remove("open");
});
document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") modal.classList.remove("open");
});

e.target === modal is true only when the click lands on the overlay itself, not on the white box.

The Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; }
  #openBtn { background: #059669; color: white; border: none; padding: 10px 18px; font-size: 16px; border-radius: 6px; cursor: pointer; }
  .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
  .overlay.open { display: flex; }
  .modal-box { background: white; padding: 24px; border-radius: 10px; width: 90%; max-width: 400px; position: relative; }
  .close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; cursor: pointer; }
</style>
</head>
<body>

<button id="openBtn">Show offer</button>

<div class="overlay" id="modal">
  <div class="modal-box">
    <button class="close" id="closeBtn" aria-label="Close">&times;</button>
    <h2>Eid Offer!</h2>
    <p>Get 20% off on all courses this week.</p>
  </div>
</div>

<script>
  const modal = document.getElementById("modal");
  document.getElementById("openBtn").onclick = function () { modal.classList.add("open"); };
  document.getElementById("closeBtn").onclick = function () { modal.classList.remove("open"); };
  modal.addEventListener("click", function (e) {
    if (e.target === modal) modal.classList.remove("open");
  });
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") modal.classList.remove("open");
  });
</script>

</body>
</html>

Try it Yourself »

Key Ideas

Code	Purpose
`position: fixed; inset: 0`	Covers the whole window, even when scrolling
`rgba(0,0,0,0.6)`	A see-through black background
`classList.add` / `remove`	Opens and closes the modal
`e.key === "Escape"`	Closes with the keyboard

Modern browsers also have a built-in <dialog> element with showModal() and close() methods. It is worth learning once you understand how a modal works.

Exercise

Which CSS makes the overlay cover the whole browser window, even while scrolling?

position: relativeposition: staticposition: fixed with inset: 0display: inline