点击元素弹出弹框后,背景不能滚动,关闭弹窗时,恢复滚动,背景元素位置保持不变

本文详细介绍了如何通过JavaScript实现网页弹窗效果,包括弹窗显示与关闭的具体步骤。展示如何获取并恢复滚动条位置,设置背景元素的位置及position属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

弹窗弹出步骤:第一步:获取滚动条的位置

var scrollTop = document.body.scrollTop;

        第二步:设置背景元素的位置

var contentStyle = document.getElementById("wrapper").style;//wrapper是可以滚动的背景元素id
contentStyle.top = "-"+scrollTop+"px";

        第三步:设置背景元素的position属性为‘fixed’

contentStyle.position = 'fixed'; //contentStyle是第二步的变量

弹出关闭步骤:第一步:恢复背景元素的初始位置

var contentStyle = document.getElementById("wrapper").style;
contentStyle.top = "0px";
   第二步:恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推)

contentStyle .position = 'absolute';

    第三步:设置滚动条的位置

window.scrollTo(0, scrollTop);//scrollTop是弹窗弹出第一步获取的值

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值