css怎么弹出居中小页面 |nginx expires css

首先，在HTML中定义弹出居中小页面的基本结构：

<div class="popup">
<div class="popup-content">
<!-- 内容 -->
</div>
</div>

然后，在CSS中设置弹出居中小页面的样式：

.popup {
display: none; /*默认隐藏*/
position: fixed; /*相对于屏幕固定位置*/
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /*半透明黑色遮罩*/
z-index: 999; /*层级最高*/
}
.popup-content {
position: absolute;
top: 50%; /*距离顶部50%*/
left: 50%; /*距离左侧50%*/
transform: translate(-50%, -50%); /*通过translate属性实现居中*/
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

最后，在JavaScript中设置弹出居中小页面的事件：

var popup = document.querySelector('.popup');
var popupContent = document.querySelector('.popup-content');
function openPopup() {
popup.style.display = 'block';
}
function closePopup() {
popup.style.display = 'none';
}
popup.addEventListener('click', function(e) {
if (e.target === popup) {
closePopup();
}
});

通过实现以上的代码，即可实现弹出居中小页面的功能。根据实际需求，可以调整样式、内容以及事件等，达到更好的效果。