最新消息:文章中包含代码时,请遵守代码高亮规范!

js固定弹窗背景页面的两种办法【原创】

HTML+CSS Aimee 415浏览 0评论

在项目开发的过程中,我们会遇到很多的弹窗页面,如果不做特别说明,弹窗出现后,弹窗底下的背景页面仍然能够滑动,为了更好的用户体验,我们需要做到,弹窗出现后,背景固定不动,弹窗关闭后,才使得背景可滑动。针对这个问题,我简单描述下我的思路:

方法一和方法二:

1.首先,我们点击按钮,弹窗弹窗的这个操作,需要获取当前页面滚动条距离顶部的高度,并且设置页面的position属性为fixed;当position为fix的时候,页面会回到顶部,这个时候之前获取的滚动条距离顶部的高度就发挥作用了,设置页面的top值为其负数,就能够做到固定背景的效果。

2.当点击关闭弹窗按钮的时候,恢复页面的position值,设置滚动条距离顶部的高度为弹窗弹出时滚动条距离页面顶部的高度即可。

方法三:

1.弹出弹窗时,同样先获取当前页面滚动条距离顶部的高度;

2.监听页面的滚动事件,当页面滚动时,设置滚动条距离顶端的距离一直为先前获取的高度;

3.关闭弹窗时,取消页面的监听事件。

以下代码仅做参考:

//设置变量
var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称 
var scrollTop_;//设置背景元素的位置
//方法一:
//弹窗出现时
function fixed(){
 scrollTop_= document.body.scrollTop;
 contentStyle.position = 'fixed'; //contentStyle是第二步的变量,设置背景元素的position属性为‘fixed’
 contentStyle.top = "-"+scrollTop_+"px";
}
//弹窗关闭时
function fixed_cancel(){
 contentStyle.position ="static";//恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推)
 $(document).scrollTop(scrollTop_);//scrollTop,设置滚动条的位置
}
//方法2:
//弹窗出现时
function bind(){
 scrollTop_= document.body.scrollTop;
 $(document).bind("scroll",function (){
 $(document).scrollTop(scrollTop_); 
 });
}
//弹窗关闭时
function unbind(){
 $(document).unbind("scroll");
}

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23397.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者aimee123的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!