How to use pure CSS to control pop-up display and hide? The core method is to use anchor point (#) links to cooperate with the :target pseudo-class to control element state. 1. When clicking to open the link, the URL becomes #popup, triggering the .modal:target style to display the pop-up; 2. The close button jumps to the # anchor point, causing the URL to return to the targetless state, and hiding the pop-up window. The pop-up content is centered and beautified by absolute positioning and transform to achieve centering, adding background masks, rounded borders, shadows and other styles. Limitations include: 1. Unable to monitor external area closures; 2. Not supported for animation transitions; 3. Weak SEO and barrier-free experiences. Suitable for static display pop-ups without loading additional scripts.

Sometimes we only need a simple pop-up effect, without introducing complex JavaScript. In fact, pure CSS can also implement a basic modal box (Modal) or popup window (Popup). The key is to use HTML's :target pseudo-class and some basic style control.

Here is how to implement a simple pop-up window using pure CSS, which is suitable for quick use without additional scripts.

How to use pure CSS to control pop-up display and hide?

The core method is to use anchor point ( # ) links to cooperate with the :target pseudo-class to control the state of the element. When the URL contains the corresponding ID, the :target style takes effect.

For example:

 <a href="#popup">Open popup</a>
<div id="popup" class="modal">
  <div class="modal-content">
    <a href="#" class="close-btn">×</a>
    <p>This is a pure CSS popup</p>
  </div>
</div>

The corresponding CSS can be written like this:

 .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);
}

After clicking "Open Popup", the URL will become #popup . At this time .modal:target takes effect and the popup will be displayed. The close button is actually to jump to the # anchor point, making the address bar return to a state where there is no specified target, thereby triggering the pop-up window to hide.

How to center and beautify the pop-up content?

In order to make the pop-up window look more beautiful, you can add some layout styles, such as vertical and horizontal centering, background masking, rounded borders, etc.

The example style is as follows:

 .modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  width: 300px;
  text-align: center;
}

.close-btn {
  float: right;
  font-size: 24px;
  text-decoration: none;
  color: #999;
}

This part mainly deals with visual presentation and does not involve logical control. You can adjust the color, size, font, etc. according to your design style.

What are the limitations that need attention?

Although this pure CSS popup method is lightweight, it also has several obvious limitations:

• Only by switching status through anchor points : Cannot listen to click on the external area to close pop-up window.
• Unable to animate transitions : Although CSS can add transitions, display: none/block does not support transitions.
• Browser compatibility is also OK : mainstream modern browsers support :target , but it is also basically available on IE.
• Slightly weak in SEO and accessibility : pop-up content is always on the page, which may affect the screen reader experience.

If you need more complex features (such as clicking on the mask layer to close, fade animation, and switching multiple pop-up windows), it is recommended to use JavaScript to control it.

Basically that's it. This method is suitable for making a static display pop-up window, which is simple and fast without loading additional scripts.

The above is the detailed content of How to create a simple modal/popup with CSS only?. For more information, please follow other related articles on the PHP Chinese website!