css实现弹窗上下左右居中且背景透明锁定窗口效果_CSS

上一篇: CSS3实现红包抖动效果下一篇:CSS3中新增的对文本和字体的设置

css实现弹窗上下左右居中且背景透明锁定窗口效果

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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联动起来即可。

到此这篇关于css实现弹窗上下左右居中且背景透明锁定窗口的文章就介绍到这了,更多相关css弹窗居中背景透明锁定窗口内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的css实现弹窗上下左右居中且背景透明锁定窗口效果全部内容，希望文章能够帮你解决css实现弹窗上下左右居中且背景透明锁定窗口效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: CSS3实现红包抖动效果下一篇:CSS3中新增的对文本和字体的设置

猜你在找的CSS相关文章