页面效果:
点击弹出框按钮后,页面上显示一个弹出框与底部靠近,并且背景层要变成灰色,原始页面不能被操作的,直到关闭弹出框。
原理:
在原页面的基础上添加两个div,一个是弹出层,一个是遮罩层,即背景层。这两个div和原始页面是在一个文件中,首先通过设置display:none;让这两个div不显示,然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏;
实现:
1、先实现页面布局;一个弹出框按钮,一个背景层,一个弹出层,一个关闭按钮。
<input type="button" name="popBox" value="弹出框" οnclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" οnclick="closeBox()">关闭</a>
</div>
<div class="content">自己设置弹出内容</div>
</div>
注意:如果你复制代码到Editplus编辑工具点击"弹出框"按钮无反应,则把onclick的代码重敲下就可以了。
2、设置弹出层和背景层的display属性为none;让他们默认隐藏不显示;
3、先给两个div设置背景颜色,方便查看;
4、设置背景层的定位;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
5.设置弹出层的显示大小,并且居中显示;
width: 200px;
height: 200px;
position:fixed;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
6.使用z-index属性设置背景层和弹出层的上下位置,值越大越靠上显示;
7.设置背景层的透明度;
8.对关闭按钮的样式做调整。
完整代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div+css+jq实现弹出框</title>
<style type="text/css">
/*背景层*/
#popLayer {
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
}
/*弹出层*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 15;
width: 100%;
height: 50%;
position: fixed;
top: 50;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
#popBox .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
/*关闭按钮*/
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
</style>
<script type="text/javascript" src="jquery-3.5.0.min.js"></script>
</head>
<body>
<input type="button" value="弹出框" onclick="popBox()" />
<div id="popLayer"></div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" onclick="closeBox()">关闭</a>
</div>
<div class="content">我是弹出层</div>
</div>
</body>
<script type="text/javascript">
/*点击弹出按钮*/
function popBox() {
$("#popBox").css("display","block");
$("#popLayer").css("display","block");
var scHeight=document.body.scrollHeight;
//设置背景层的高度有页面显示完所有内容的高度
$("#popLayer").height(scHeight);
};
/*点击关闭按钮*/
function closeBox() {
$('#popBox').css('display','none');
$('#popLayer').css('display','none');
}
</script>
</html>
参考链接:https://blog.csdn.net/weixin_37580235/article/details/82291028
搞定。