首页,我们需要先确定在提示框出现后,是否需要让底层页面不可操作;
- 如果对底层内容不做限制,则直接做一个弹出层即可
- 如果要让底层页面不可以操作,则需要一个蒙层来让用户操作不到底层页面
我们就直接做有蒙层的,没有蒙层的直接去掉就好了。
基础页面:
<!DOCTYPE html>
<html>
<head><title>弹出层测试</title>
<style>
body {
margin: 0;
padding: 0;
}
img{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.mo {
position: absolute;
top: 0;
width: 100%;/* 把整个页面都蒙上 或者不需要全蒙的,可以小一点 */
height: 100%;
background-color: aqua;
z-index: 998; /* 弹出层一定要在其他内容图层之上 类似于窗口的置顶 数值越大 越靠上越是优先显示*/
display: none; /* 首先把div隐藏 */
}
.pop {
position: relative;
display: none; /* 隐藏 */
margin: 10% auto;
width: 300px;
height: 300px; /* 弹出层的宽高 */
background-color: salmon;
z-index: 999; /* 把真正的弹出层设置为最高图层 要比蒙层高 */
}
.btn{
position: absolute;
}
</style>
</head>
<body>
<div class="fd">
<img src=".//img/bgi_river.jpg"/><!-- 用图片模拟其他所有内容 -->
<button class="btn" id="setting">我是一个按钮</button><!-- 点击出现弹出层 -->
</div>
<div class="mo"></div><!-- 蒙层 不需要可以去掉-->
<div class="pop">
<span>这是弹出层</span>
</div>
</body>
</html>
这样之后我们需要js来协助我们(这里我使用了jQuery)
<script type="text/javascript" src="./js/jquery-3.4.1.js" ></script>
<script>
$(function(){
$("#setting").click(function(){
$(".mo").css("display", "block");/* 设置蒙层display为block,即div显示出来 */
$(".pop").css("display", "block");/* 设置弹出层display为block,即div显示出来 */
});
}
</script>
我们先把蒙层大小调整到60% (没有定位调整,所以在左上角),然后没有被蒙层覆盖的地方就是可以操作的。
然后把蒙层大小调整为100%再来看看效果
这样大概就好了
再看关闭弹出层
其实很简单,把之前设置的display重新设置为none,就可以了
我在弹出层中加入一个按钮,js中加入函数
<div class="pop">
<span>这是弹出层</span>
<button id="setting_return">这又是一个按钮</button> <!-- 按钮要加在 -->
</div>
<script>
$(function(){
$("#setting_return").click(function(){
$(".mo").css("display", "none");
$(".pop").css("display", "none");
});
});
</script>
再看
需要美化的,在进行美化就好了,有其他内容的话,比如表单之类,可以放到弹出层内,同时在表单提交时让弹出层隐藏起来就可以了。
或者我们让蒙层透明,也就是可以看到底层内容,只要更改蒙层的opacity的值就可以了这里我改成了opacity:0.4
OK,搞定!!!