所以我使用的是SimpleModal（http://www.ericmmartin.com/projects/simplemodal/）
我似乎无法阻止模式后面的滚动。
modal [Boolean：true] 用户将无法与远离对话框的模式或选项卡下方的页面进行交互。如果为false，则会禁用overlay，iframe和某些事件，以允许用户与对话框下方的页面进行交互。
function getStatus(baseURL, programID, appID){
var src = baseURL + "/admin/statepost/" + programID + "/" + appID ;
$.modal('<iframe id="statusIframe" src="' + src + '" height="1000" width="800" style="border:10px">', {
escClose: false,
modal: true,
overlayClose: false,
containerCss:{
backgroundColor:"#000",
borderColor:"#fff",
padding:0
}
});
}
你会看到我有模态：true但我仍然可以在模态后面滚动。有什么我想念的吗？
答案 0 :(得分：2)
我不熟悉这个插件，但我猜它与你的模态中的iframe有关。
也就是说，您可以使用onOpen()和onClose()回调来实现这一目标。
onShow: function(dialog) {
$("body").addClass("no-scroll");
},
onClose: function(dialog) {
$("body").removeClass("no-scroll");
$.modal.close(); //Must call this for the plugin to work
},
<body>元素的CSS非常简单：
.no-scroll {
margin: 0;
height: 100%;
overflow: hidden
}
我在JSFiddle here上举了一个例子。
答案 1 :(得分：1)
为了抑制身体滚动你可以在模态上添加样式：
$('body').css('overflow', 'hidden');
并且在模态关闭时你需要删除它：
$('body').css('overflow', '');
摘录（来自演示）：
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://simplemodal.com';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
escClose: false,
modal: true,
overlayClose: false,
containerCss:{
backgroundColor:"#000",
borderColor:"#fff",
padding:0
},
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onClose: function (dialog) {
$('body').css('overflow', '');
this.close();
},
onShow: function (dialog) {
$('body').css('overflow', 'hidden');
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
//callback.apply();
}
$('body').css('overflow', '');
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}#confirm {display:none;}
/* Overlay */
#confirm-overlay {background-color:#eee;}
/* Container */
#confirm-container {height:140px; width:420px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; background:#fff; border:2px solid #336699;}
#confirm-container .header {height:30px; line-height:30px; width:100%; background:url(../img/confirm/header.gif) repeat-x; color:#fff; font-weight:bold;}
#confirm-container .header span {padding-left:8px;}
#confirm-container .message {color:#333; font-size:14px; margin:0; padding:12px 4px 12px 8px;}
#confirm-container .buttons {line-height:26px; width:160px; float:right; padding:10px 8px 0;}
#confirm-container .buttons div {float:right; margin-left:4px; width:70px; height:26px; color:#666; font-weight:bold; text-align:center; background:url(../img/confirm/button.gif) repeat-x; border:1px solid #bbb; cursor:pointer;}
#confirm-container a.modal-close,
#confirm-container a.modal-close:link,
#confirm-container a.modal-close:active,
#confirm-container a.modal-close:visited {text-decoration:none; font-weight:bold; position:absolute; right:10px; top:2px; color:#fff;}
#confirm-container a.modal-close:hover {color:#ccc;}
body {background:#fff; color:#333; font: 12px/22px verdana, arial, sans-serif; height:800px; margin:0 auto; width:100%;}
h1 {color:#3a6d8c; font-size:34px; line-height:40px; margin:0;}
h3 {color:#3a6d8c; font-size:22px; line-height:26px; font-weight:normal; margin:0 0 8px 0;}
img {border:0;}
#logo {margin-bottom:20px; width:300px;}
#logo h1 {color:#666; letter-spacing:-1px; font-weight:normal;}
#logo h1 span {color:#444; font-weight:bold;}
#logo .title {color:#999; font-size:12px;}
#container {margin:0 auto; padding-top:20px; width:800px;}
#content {border-bottom:1px dotted #999; border-top:1px dotted #999; padding:20px 0;}
#footer {clear:left; color:#888; margin:20px 0;}
#footer a:link, #footer a:visited {color:#888; text-decoration:none;}
#footer a:hover {color:#333; text-decoration:underline;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/ericmmartin/simplemodal/master/src/jquery.simplemodal.js"></script>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='confirm-dialog'>
<h3>Confirm Override</h3>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='' alt='' />
<img src='' alt='' />
</div>
</div>
<div id='footer'>
© 2013 <a href='http://www.ericmmartin.com/'>Eric Martin</a><br/>
<a href='https://github.com/ericmmartin/simplemodal'>SimpleModal on GitHub</a><br/>
<a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>