DEV Community

Cover image for How I Built a Modal Window Using Only HTML & CSS (No JavaScript!)
Neil Brown
Neil Brown

Posted on

How I Built a Modal Window Using Only HTML & CSS (No JavaScript!)

#javascript #html #css

Modal windows—those popups that overlay a page—are commonly used for login forms, alerts, and messages. Most developers reach for JavaScript when creating them. But what if I told you that you can build a clean, functional modal window using only HTML and CSS?

In this post, I’ll show you exactly how to do that—no JavaScript required.

Why I Prefer Pure CSS Modals (Sometimes)

There are times when I want something fast, lightweight, and easy to maintain—especially for simple sites, landing pages, or documentation. That’s when a pure CSS modal becomes the perfect solution. It works even when JavaScript is disabled and keeps your front end lean.

HTML Structure
To show and hide the modal, I use the :target pseudo-class. Here's how I structure the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Pure CSS Modal</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Trigger Button -->
  <a href="#modal" class="open-btn">Open Modal</a>

  <!-- Modal -->
  <div id="modal" class="modal">
    <div class="modal-content">
      <a href="#" class="close-btn">&times;</a>
      <h2>Pure CSS Modal</h2>
      <p>This modal was built with just HTML and CSS.</p>
    </div>
  </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Styling
Here's the CSS that brings the modal to life:

/* Base styling */
body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  text-align: center;
  padding-top: 100px;
}

.open-btn {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
}

/* Modal overlay */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* When target is active */
.modal:target {
  opacity: 1;
  pointer-events: auto;
}

/* Modal content */
.modal-content {
  position: relative;
  margin: 10% auto;
  padding: 20px;
  background: #fff;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  text-decoration: none;
  font-size: 24px;
  color: #333;
}
Enter fullscreen mode Exit fullscreen mode

How It Works

  • The <a href="#modal"> triggers the modal by changing the URL fragment.
  • CSS :target selector picks up the #modal in the URL and applies styles (like opacity: 1).
  • Clicking the close button (<a href="#">) removes the hash from the URL, hiding the modal.

Pros and Cons

Pros:

  • No JS dependencies
  • Great for static sites
  • Works with just HTML and CSS

Cons:

  • Only one modal can be opened at a time
  • Less control over advanced interactivity
  • Limited accessibility options

Final Thoughts
I use pure CSS modals when I need a simple, elegant solution without extra JavaScript. It’s a great trick to have in your front-end toolbox—perfect for things like simple alerts, newsletters, or onboarding popups.

If you need more complex behavior (like form validation or animations), JavaScript still has its place. But for fast-loading, minimal sites, this CSS-only approach is surprisingly powerful.

Let me know if you’d like a version of this modal that supports animations, dark mode, or more advanced layout tricks!

Check our website to read more blogs.

Top comments (0)