- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 用CSS怎样实现弹窗居中且背景半透明效果？
用CSS怎样实现弹窗居中且背景半透明效果？
Admin 2021-05-07 群英技术资讯 1272 次浏览
现在很多网页都会添加弹窗效果，很多新手好奇要如何实现这个效果，以下图展示效果为了，也就是弹窗居中且背景半透明，这应该如何实现呢？下面就分享一个使用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中让元素旋转的属性是什么，用法是怎样
css3属性控制旋转的代码是：1、“元素{transform:rotate(旋转角度);}”代码控制元素2d旋转样式；2、“元素{transform:rotate3d(x,y,z,旋转角度);}”代码控制元素3d旋转样式。
-
CSS精灵图是什么，实现方式是怎样
目录I.精灵图介绍II.精灵图的实现方式：拼出你的名字III.软件辅助定位I.精灵图介绍首先，我们先介绍一下什么是精灵图：先强调一点哈，精灵图和下面这个玩意儿没啥关系：它的名字是这
-
CSS盒子水平垂直居中的实现方式有什么
最全的CSS盒子(div)水平垂直居中布局，想不到水平垂直居中居然还有这种方式，对CSS布局掌握程度决定你在Web开发中的开发页面速度。...
-
用CSS怎样做一个3D魔方？一文带你看懂过程
用CSS怎样做一个3D魔方？有一些朋友看到一些网站上有做3D相册的效果，感觉很炫酷、很好看。其实实现3D相册效果并不难，这里我们通过一个简单的3D魔方实现示例给大家来讲讲，用CSS怎样做出3D效果，看懂这篇大家就能够自己尝试做3D相册了。本文的3D魔方实现效果及代码如下：
-
CSS中制作环形文本的方法及代码是什么
在项目开发中，我们可能会遇到环形文本的需求，这个时候，怎样在代码以通俗易懂的前提下实现我们需要的效果呢？可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来，这个方案不仅非常麻烦，而且还给页面的DOM元素添加了很多不必要的臃肿的标记著作权归作者所有。你可能也会想到既然怕麻烦，不如就用图片吧，简单粗暴多好，可是这样的话后期如果要修改就需要修改原始图片，这不是我们想要的效果，那如何才能用c
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
