如何避免在jQuery移动端打开弹出窗口时上下滚动
How can I avoid scroll up and down when a popup is open in jQuery Mobile
我有这个例子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>
我有一个大的背景在我的实际代码,所以,我想做的是,每次弹出窗口打开,我想要它避免用户能够滚动向下或向上基于背景。
使用这个打开弹出按钮
<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>
和你的goback按钮
<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>
您还可以为您的容器div添加id,并将按钮上的onclick
功能更改为onclick="document.getElementById("containerID").style.overflow = 'hidden'";
和onclick="document.getElementById("containerID").style.overflow = 'visible'";
可以将body
溢出设置为隐藏,如下所示:
$(body).css("overflow", "hidden");
,只要使用:
$(body).css("overflow", "auto");
希望能有所帮助。
相关文章:
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- AngularJS窗口滚动事件未触发
- Jquery - 使用窗口滚动时抖动滚动
- 摩尔工具覆盖窗口滚动
- 窗口滚动不起作用
- 图像宽度上的转换不适用于窗口滚动
- colorbox jquery lightbox随父窗口滚动
- jQuery-在窗口滚动上运行一个函数,没有任何延迟
- 长表滚动,但阻止窗口滚动
- 使用窗口滚动而不是容器滚动隐藏
- 使用窗口滚动查找光标的位置
- 窗口滚动 Y = 0 在高图表重绘()
- 灯箱演变防止窗口滚动问题
- jQuery 或 Javascript - 如何禁用窗口滚动而不使用 overflow:hidden;.
- 获取窗口滚动或 yui 中的滚动 Y 位置
- 如何使用锚滚动()将窗口滚动到AngularJS中的元素
- 淡入和淡出在窗口滚动后发生多次
- j查询在scrollTop()调用后重置窗口滚动
- 禁用任何类型的浏览器窗口滚动
- “返回顶部”按钮仅在窗口滚动时可见(但移动设备不起作用)