SimpleModal - 设置模态后仍然可以在模态后面滚动：true答案

【问题标题】：SimpleModal - Can still scroll behind modal after setting modal: trueSimpleModal - 设置模态后仍然可以在模态后面滚动：true
【发布时间】：2017-08-21 19:54:37
【问题描述】：

所以我使用的是 SimpleModal (http://www.ericmmartin.com/projects/simplemodal/)

我似乎无法让它阻止模式后面的滚动。

模态 [Boolean:true] 用户将无法与远离对话框的模式或选项卡下方的页面进行交互。如果为 false，则覆盖层、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
    }
});

}

你会看到我有 modal: true 但我仍然可以滚动到 modal 后面。有什么我想念的吗？

【问题讨论】：

标签： javascript jquery simplemodal

【解决方案1】：

我不熟悉这个插件，但我猜它与你的模态框中的 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 上放了一个例子。

【讨论】：

【解决方案2】：

为了抑制正文滚动，您可以在模态显示样式上添加：

$('body').css('overflow', 'hidden');

在模态关闭时，您需要删除它：

$('body').css('overflow', '');

sn-p（来自演示）：

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'>
        &copy; 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>

【讨论】：

谢谢！对于任何阅读本文的人。此响应与已接受的答案相同，但带有额外信息。非常适合进一步参考。