怎样通过 CSS 来制作带有弹出窗口的中间位置透明的背景呢？

发布时间：2023-07-22 14:49:57 所属栏目：语言来源：

导读： 现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用CSS实现的代码，感兴趣的朋友就继续往下看吧。

现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用CSS实现的代码，感兴趣的朋友就继续往下看吧。

        html代码

<div class="box">

<div class="boxs">

    

</div>

</div>

        css代码

html, body {

     width: 100%;

     height: 100%;

}

.box {

     display: none;

     width: 100%;

     height: 100%;

     position: fixed;

     left:0;

     top:0;

     background-color:rgba(0,0,0,0.5);

}

.boxs {

     width: 400px;

     height: 300px;

     background: #fff;

     box-shadow: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);

     border-radius: 4px;

     cursor: pointer;

     position: absolute;

     left: 50%;

     top: 50%;

     margin-top: -150px;

     margin-left: -200px;

}
        使用position：fixed固定透明背景元素，可以有效锁定窗口防止滚动条滚动，且可以利用定位在父元素内部实现子元素上下左右居中。至于弹出操作只需把点击事件和外层div的display属性的none以及block联动起来即可。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!