Modal windows and light boxes can implement basic functions through pure CSS without JavaScript. 1. Use the :target pseudo-class to control the display status based on URL anchor points. The advantage is that there is no script required, but the mask cannot be closed; 2. Use hidden checkbox and label to achieve more flexible interaction, such as clicking mask to close and adding animation transitions; 3. Pay attention to optimization details such as compatibility, accessibility (such as adding aria-label), and preventing background scrolling (using overflow: hidden). The two methods have their own applicable scenarios, suitable for static pages or lightweight projects.

Modal windows and lightboxes are common interactive components in web pages, which are used to pop up a translucent mask layer on the current page and display additional content. Implementing them does not actually require complex JavaScript, and using pure CSS can also achieve basic functions, especially suitable for static pages or lightweight needs.

Basic structure and triggering method

To create a modal window, the HTML structure usually includes:

• Trigger button (such as "click to open")
• Mask layer (overlay or backdrop)
• Pop-up window content area (modal content)

Use CSS to control the display of hidden state, which can be controlled by :target pseudo-class or combined with the checked state of checkbox . :target is the easiest way, but it requires an anchor point in the URL; while checkbox is more flexible and does not change the address bar.

 <a href="#modal">Open pop-up window</a>
<div id="modal" class="modal">
  <div class="modal-content">
    <a href="#">Close</a>
    <p>This is the pop-up content</p>
  </div>
</div>

Style and interactive control

This part mainly relies on CSS to complete visual expression and interactive logic.

Use:target to switch

This method uses anchor points to activate pop-ups, and when the URL contains #modal , the corresponding element will apply styles.

 .modal {
  display: none;
}

.modal:target {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}

The advantage of this method is that it does not use JS at all, and the disadvantage is that it cannot close the pop-up window by clicking on the mask unless it adds a link to another location on the page.

Use checkbox to control status

A more modern approach is to use hidden checkbox and label combinations, which can support click mask closing, animation transition and other effects.

 <input type="checkbox" id="modal-toggle" hidden>
<label for="modal-toggle" class="modal-trigger">Open pop-up window</label>

<div class="modal">
  <label for="modal-toggle">Close</label>
  <div class="modal-content">
    <p>This is the content</p>
  </div>
</div>

CSS control display logic:

 .modal {
  display: none;
}

#modal-toggle:checked ~ .modal {
  display: block;
}

This method is more extensible and easier to click to close with animation and mask layer.

Notes and optimization suggestions

• Compatibility and experience : The pure CSS solution, while lightweight, may not be fully supported on older browsers (such as IE), or may lack transition animations.
• Accessibility (a11y) : Adding aria-label or role="dialog" can help screen readers recognize pop-up content.
• Click Mask to close : If you want to click Mask to close the pop-up window, you can use a label to cover the entire mask layer and bind it to the checkbox.
• Prevent background scrolling : When pop-up window is displayed, adding overflow: hidden to the body can prevent the content behind it from scrolling.

Let's summarize

The core of using CSS to create a modal window or light box is to control the switching method of display status. :target method is suitable for fast implementation, while the checkbox label is more suitable for complex scenarios. Although these methods do not completely replace JS's flexibility, they are sufficient for static pages or lightweight projects.

Basically, that's not difficult to implement, but some details are easy to ignore, such as the position of the close button, the response range of the mask layer, and the problem of mobile terminal adaptation.

The above is the detailed content of Creating modal windows or lightboxes with css. For more information, please follow other related articles on the PHP Chinese website!