用CSS怎样实现弹窗居中且背景半透明成效？
发布时间：2022-04-14 13:57:19 所属栏目：语言 来源：互联网
导读：现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用CSS实现的代码，感兴趣的朋友就继续往下看吧。 html代码 div class=box div class=boxs !-- 白色弹
|
现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用CSS实现的代码，感兴趣的朋友就继续往下看吧。 html代码 <div class="box"> <div class="boxs"> <!-- 白色弹窗 --> </div> </div> .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联动起来即可。 对css实现居中且背景半透明的弹窗效果就介绍到这，上述代码有一定的借鉴价值，有需要的朋友可以参考一下，希望对大家学习有帮助。 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
