简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

弹出弹框

效果展示

简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

实现原理

  1. html结构比较简单,即:

    <div>遮罩层
    <div>弹框</div>
    </div>
  2. 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%);

  3. 在遮罩层的div.box里写弹框的div.container,位置相对于父级定位

代码实现

HTML:

 <div>
<button class="open">点我弹出弹框</button>
</div>
<div class="box">
<div class="container">
<button class="close">关闭弹框</button>
</div>
</div>
 

CSS:

 html, body {
width:100%;
height:100%;
}
.box {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:;
left:;
background: rgba(51,51,51,0.5);
z-index:;//根据自己页面情况设置
}
.container {
width: 500px;
height: 200px;
position: absolute;
top: 50%;//以下3行设置弹框居中页面,根据自己页面情况选择
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index:;//根据自己页面情况设置
}
 

JavaScript:

 $(document).ready(function(){
$(".open").click(function(){
$(".box").show();
})
$(".close").click(function(){
$(".box").hide();
})
})

原页面内容不可滚动弹框内容可滚动

效果展示

简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

实现原理

  1. 弹框内容需要滚动一定是内容超出弹框的高度,所以要给弹框内想滚动的部分设overflow: auto;

  2. 然后是Jq实现部分。当弹框弹出时原页面内容不能滚动,即将body样式设为overflow: hidden;原页面的内容就不会动了;当弹框关闭后再将body样式改为默认的overflow: auto;

  3. 2中的JS写一个函数,再在弹框的JQ中调用函数。

代码实现

CSS:

.container中增加一条

 .container {
overflow: auto;
}
 

JavaScript:

 function toggleBody(isPopup) {
if (isPopup) {
document.body.style.height = '100%';
document.body.style.overflow = 'hidden';
}else {
document.body.style.height = 'auto';
document.body.style.overflow = 'auto';
}
}
 

JQ中需要增加调用toggleBody()函数

 $(".open").click(function(){
$(".box").show();
toggleBody(1);//增加部分
})
$(".close").click(fundtion(){
$(".box").hide();
toggleBody(0);//增加部分
})
 

*有错误的地方欢迎指正

*转载请注明出处

上一篇:基本排序算法:Python实现


下一篇:带偏移量的AES加密工具