css怎么做弹出窗口

CSS的弹出窗口是一个很有用的功能。如果你想显示一段文本或者展示一张图片，但是不想让它占据整个页面，那么弹出窗口是一个非常好的选择。下面我们来看一下如何用CSS实现弹出窗口。

.popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      width: 400px;
      padding: 20px;
      box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
      z-index: 999;
      display: none;
}
.popup .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
}
.popup.show {
      display: block;
}
    

CSS代码中，我们首先定义了一个class为.popup的样式，它是用来控制弹出窗口的。接着我们来逐个解释这些属性：

• position: fixed;
• top: 50%;
• left: 50%;
• transform: translate(-50%, -50%);
• background-color: white;
• width: 400px;
• padding: 20px;
• box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
• z-index: 999;
• display: none;

其中，前9个属性用来定义弹出窗口的样式。我们将其定位到浏览器窗口的中央，并设置了一些基本的样式属性，如宽度、背景颜色等。z-index: 999; 用来保证弹出窗口始终在其他元素的前面。

最后一个属性display: none; 表示窗口一开始是隐藏的。

下面我们再来看一个class为.popup .close的样式，它用来控制关闭按钮的样式：

.popup .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
}

该样式的作用是将关闭按钮定位在右上角，并为其添加一个pointer光标效果，当鼠标悬浮在按钮上时会变成小手状。

最后，我们用.popup.show的样式让弹出窗口显示出来：

.popup.show {
      display: block;
}
    

当我们想要显示该窗口时，只需要给它的class属性加上show即可。

现在，我们已经学会了如何用CSS实现弹出窗口。如果你想让你的网站更加高大上，不妨试试添加一个吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！