- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 用CSS怎样实现弹窗居中且背景半透明效果？
用CSS怎样实现弹窗居中且背景半透明效果？
Admin 2021-05-07 群英技术资讯 942 次浏览
现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用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实现居中且背景半透明的弹窗效果就介绍到这，上述代码有一定的借鉴价值，有需要的朋友可以参考一下，希望对大家学习有帮助。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS中怎样引用@font-face，使用方法是什么
这篇文章主要介绍了css中引入指定字体@font-face兼容各浏览器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
CSS的下划线样式设置长度方法是什么
css中下划线样式能设置长度吗能。在css中可以通过设置文字元素的下边框来设置文字元素的下划线，只需要通过width元素设置文字元素的宽度，也即设置文字元素的下划线。示例如下：<
-
CSS声明弹性盒子的方式有几种，如何实现性布局
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局,这篇文章主要介绍了CSS中的flex布局,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
-
CSS中position定位属性如何使用，有什么要注意？
这篇文章我们来了解CSS中position定位属性的相关内容，position定位属性是CSS学习中的基础知识，因此本文就给大家来介绍一下，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！
-
CSS设置浮动能解决什么问题，如何消除浮动影响
浮动的定义，设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘。浮动解决的问题，解决文字包围图片的问题；解决间隔问题；可以向左，或者向右排版将文字排版到图片左端。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
