时间戳

首页 > 解决方案 > 如何在具有透明背景的网站上创建可关闭的 div？

php - 如何在具有透明背景的网站上创建可关闭的 div？

问题描述

我正在寻找一个漂浮在现有网站顶部的 div，我希望该网站在顶部有一个黑色遮罩，不透明度为 20%，div 为 100% 不透明度。

我仅限于在这个阶段使用 html 和 css。

我目前的代码是

.popup {
	margin: 75px auto;
	padding: 20px;
	background: #fff;
	width: 500px;
	box-shadow: 0 0 50px rgba(0,0,0,0.3);
	position: relative;
}
  <div id="popup1" class="overlay">
    <div class="popup">
      <h2><center>HEADER</center></h2>
      <div class="content">
        <p><center>CONTENT</center>
      </div>
    </div>
  </div>

如果可能，我想为人们添加一个关闭图标以继续浏览该网站。

更重要的是，我希望整个网站的不透明度变暗，而顶部的盒子完全是白色的。

我需要添加什么？

标签： phphtmlcss

解决方案

这是带有纯 css 弹出窗口的更新小提琴

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 2s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <h2>
      <center>HEADER</center>
    </h2>
    <div class="content">
      <p>
        <center>CONTENT</center>
    </div>
  </div>
</div>

推荐阅读