在jQuery Mobile中打开弹出窗口时，如何避免上下滚动
[英]How can I avoid scroll up and down when a popup is open in jQuery Mobile
问题描述
I have this example jquery popup code: http://jsfiddle.net/9jrrd1hL/ 
我有这个示例jquery弹出代码： http : //jsfiddle.net/9jrrd1hL/
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>
<p>Table Example:</p>
<style type="text/css">
table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;}
table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;}
table.example5 th {background-color:LimeGreen;color:white;}
table.example5 th:first-child {width:20%;}
</style>
<table class="example5">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
<p>Frames Example:</p>
<iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="90%">
</iframe>
<p>Image Example:</p>
<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a>
<p>Frames Example:</p>
<iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="90%">
</iframe>
<p>Image Example:</p>
<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a>
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<h2>Welcome to my Popup Dialog!</h2>
<p>jQuery Mobile is FUN!</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
I have a large background in my real code so, what I want to do is that every time the popup is opened I want it to avoid the user to be able to scroll down or up based on the background. 我的真实代码中有一个很大的背景，因此，我想做的是每次打开弹出窗口时都希望它避免用户能够根据背景上下滚动。
2 个解决方案
解决方案1
1 已采纳 2015-08-21 21:22:22
Use this on you open popup button 在打开弹出按钮上使用此按钮
<a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" onclick="document.body.style.overflowY = 'hidden'">>Open Dialog Popup</a>
and your goback button 和您的返回按钮
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back" onclick="document.body.style.overflowY = 'visible'">Go Back</a>
You can also add an id to you container div and change the onclick function on buttons to onclick="document.getElementById("containerID").style.overflow = 'hidden'"; 您还可以向容器div中添加一个id，并将按钮上的onclick函数更改为onclick="document.getElementById("containerID").style.overflow = 'hidden'"; and onclick="document.getElementById("containerID").style.overflow = 'visible'"; 和onclick="document.getElementById("containerID").style.overflow = 'visible'";
解决方案2
0 2015-08-21 21:38:21
You can set the body overflow to hidden, like this: 您可以将body溢出设置为隐藏，如下所示：
$(body).css("overflow", "hidden");
and to get the scroll back just use: 并要返回滚动，只需使用：
$(body).css("overflow", "auto");
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.