网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

有一种简单的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联动起来即可。

上一篇:CSS3实现红包抖动效果
下一篇:css 利用 position + margin 实现固定盒子横向纵向居中的方法
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap