Modern CSS: Create a modal popup without javascript

Introduction

In modern web development, modals are a common UI component used to display important information or facilitate user interactions. While JavaScript offers robust interactivity, there are occasions where the simplicity of CSS is ideal for quickly implementing a modal.

This article we introduce how to create a modal popup using the href and target attributes. This approach leverages anchor links and pseudo-class selectors, combined with CSS styles, to manage the modal’s visibility.

The basic concept of implementation

Using HTML anchor links (href=“#id”) and the CSS :target pseudo-class to control the visibility of the Modal.

Core mechanism:

• Clicking a link navigates to an element with a specific id.
• The :target selector matches the currently navigated element to dynamically show the Modal.

The code can be simplified to the following:

#target-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#target-content:target {
  pointer-events: all;
  opacity: 1;
}
#target-content #target-inner {
  position: absolute;
  display: block;
  padding: 48px;
  line-height: 1.8;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
}
#target-content a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #34495E;
  opacity: 0.5;
  transition: opacity 200ms;
}

<a href="#target-content" id="button">Open Modal</a>
<div id="target-content">
  <a href="#" class="close"></a>
  <div id="target-inner">
    <h2>CSS Modal</h2>
    Here is modal content     
  </div>
</div>

And demo as shown in the below gif:

Detailed Explanation

The page consists of two main elements: an <a> tag that opens the modal and the target-content modal itself.

Initial State

At first, the target-content modal is styled with opacity: 0;, making it invisible.

Opening the Modal

When the user clicks the <a> tag, the browser appends #target-content to the address bar. This is standard behavior for hash navigation in HTML.

The key functionality comes from the :target pseudo-class. When the hash in the address bar matches an element’s id, the :target selector activates for that element. In this case, #target-content:target is matched, and we set its opacity to 1, making the modal visible.

Closing the Modal

Inside the modal, we include a link with an empty hash (href=”#”). Clicking this link removes the hash from the address bar and resets the modal to its initial hidden state.

To enhance user interaction, we style the modal’s mask using:

top: 0;
right: 0;
bottom: 0;
left: 0;

This ensures the modal’s mask spans the entire screen. Clicking anywhere outside the modal content removes the hash from the address bar, closing the modal.

This approach is a simple and effective way to create modals using pure HTML and CSS, relying on the :target pseudo-class for interaction without JavaScript.

Summary

Advantages

• Simplicity: This method uses only HTML and CSS, making it straightforward and lightweight to implement.
• Performance: Without JavaScript, it loads faster and minimizes performance overhead on the browser.
• Accessibility: Built-in hash navigation and native HTML elements ensure compatibility with assistive technologies like screen readers.
• Ease of Maintenance: With no JavaScript logic involved, the implementation is easier to debug and maintain.

Disadvantages

• Limited Interactivity: The :target pseudo-class lacks flexibility, making advanced features like interactive data handling difficult without JavaScript.
• URL Hash Issue: The hash (#target-content) appears in the address bar when the modal is active. This could confuse users or disrupt browser history navigation.
• Scalability: Implementing multiple modals or adding dynamic functionality becomes challenging and error-prone.
• SEO Concerns: Improper use of hashes might affect how search engines interpret and crawl the page, potentially impacting SEO.

Recommended Scenarios for Using Pure CSS

• Static Website Alerts or Lightweight User Feedback: For static websites where interactivity is minimal, pure CSS modals work perfectly. They are great for tasks like showing simple notifications, displaying disclaimers, or offering basic user feedback without relying on JavaScript.
• Rapid Prototyping for Temporary Solutions: When speed is a priority during prototyping, pure CSS modals offer a quick and easy way to showcase modal designs. They are especially useful for creating mockups or temporary designs that don’t require advanced features or full functionality.

These scenarios highlight the strengths of pure CSS modals, especially when simplicity and speed are more important than complex interactivity.