如何在手机上实现弹出框弹出时,弹出框内可以上下滚动,背后的页面锁定不能滚动?...
时间: 2023-12-05 21:05:17 浏览: 22
可以使用CSS的固定定位和overflow属性来实现这个效果。
首先,在弹出框的CSS中设置固定定位和overflow属性:
```
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
```
然后,使用JavaScript来控制弹出框的显示和隐藏:
```
var popup = document.querySelector('.popup');
var trigger = document.querySelector('.trigger');
trigger.addEventListener('click', function() {
popup.classList.add('show');
document.body.style.overflow = 'hidden'; //禁止背景页面滚动
});
popup.addEventListener('click', function(event) {
if (event.target.classList.contains('popup')) {
popup.classList.remove('show');
document.body.style.overflow = 'auto'; //恢复背景页面滚动
}
});
```
在上面的代码中,当点击触发器时,弹出框会添加一个show类,显示出来,并将背景页面的overflow属性设置为hidden,禁止滚动。当点击弹出框本身时,会移除show类,隐藏弹出框,并将背景页面的overflow属性设置为auto,恢复滚动。由于弹出框的高度超过了屏幕高度,因此只有弹出框内部会出现滚动条,背景页面则不受影响。