防止页面滚动，如果弹出窗口打开

我正在使用jquery移动弹出窗口。这是在页面内部。有一个图像可以打开这个弹出窗口。现在，如何在弹出窗口打开的情况下防止整个页面滚动，并在弹出窗口关闭时允许滚动？防止页面滚动，如果弹出窗口打开

<a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a> 

    <br> 
    <div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all"> 
     <div style="padding:10px 20px;"> 
      <h3>Location Details</h3>    
     </div>   
    </div>

来源

2013-03-11 Pramod Setlur

当模式框打开时，将overflow-y: hidden;指定给您不想滚动的元素怎么办？（通常这将是<body>）

来源

2013-03-11 11:39:44 Terry

有两种方式：

Either "overflow:hidden" the body
Or give a "position:fixed" to the popup so this will scroll in the viewport.

来源

2013-03-11 11:43:22 Jai

该款式使得弹出窗口在右下角开放，使其看起来很丑。实际上有一个下拉菜单（我没有粘贴代码），它现在没有被填充。 – 2013-03-12 07:10:15

您可以使用事件弹出窗口小部件

$("#settingsPopUp").popup({ 
    afteropen: function(event, ui) { 
    $('body').css({ 
     overflow:'hidden' 
    }); 
    }, 
    afterclose: function(event, ui) { 
    $('body').css({ 
     overflow:'auto' 
    }); 
    } 
});

我认为这是一个动态的解决方案，它将需要ca你的问题重演。

来源

2013-03-11 12:08:15 misoukrane

它不工作。 :( – 2013-03-12 05:02:57

我不能评论以前的答案，但有一个小错误。下面的代码段为我做的伎俩：

$("#mypopup").popup({ 
    afteropen: function(e) { 
    $('body').css('overflow','hidden'); 
    }, 
    afterclose: function(e) { 
    $('body').css('overflow','auto'); 
    } 
});

来源

2013-09-17 18:04:54 Lefois

对于我这个方法不奏效，它适用于浏览器，但不是在电话间隙应用。所以我解决这个问题：

$('#Popup-id').on({ 
    popupbeforeposition: function(){ 
     $('body').on('touchmove', false); 
    }, 
    popupafterclose: function(){ 
     $('body').off('touchmove'); 
    } 
});

希望它有帮助！

来源

2013-11-04 12:23:11

它适用于我！谢谢。我使用'popupafteropen'和'popupafterclose'events。 – oriolparra 2014-10-02 14:41:26

我混了Lefois的解决方案和西莫娜阿德里安尼的解决方案。它适用于浏览器和手机WebView（PhoneGap + jquerymobile）。

$(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) { 
    $('body').css('overflow', 'hidden').on('touchmove', function(e) { 
     e.preventDefault(); 
    }); 
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) { 
    $('body').css('overflow', 'auto').off('touchmove'); 
});

来源

2014-10-02 14:49:28 oriolparra

这是一个完美的答案，应该被接受。我使用相同的，这适用于所有浏览器在桌面和移动设备 – 2015-07-02 06:24:03

如果您仍然希望能够在模式对话框中滚动，这不起作用。 – Roel 2016-07-14 09:25:39

防止页面滚动，如果弹出窗口打开

回答

相关问题