SimpleModalは - まだモーダルを設定した後、モーダル後ろにスクロールすることができます：真

だから私はSimpleModal（http://www.ericmmartin.com/projects/simplemodal/）SimpleModalは - まだモーダルを設定した後、モーダル後ろにスクロールすることができます：真

を使用していると私はそれがモーダル後ろにスクロール阻止するために得るように見えることはできません。

modal [ブール：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 
    } 
});

}

私はモーダル持って表示されます。私は行方不明のものがありますか？

出典

2017-08-21 TonyO

私はこのプラグインに精通していませんが、私はあなたのモーダルの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に例を置きます。あなたはモーダルショーにスタイルを追加することができ、スクロール体を抑制するために

出典

2017-08-21 20:39:53

ありがとうございました！それは意味を成し、完璧に働く。 – TonyO

：

$('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'> 
 
     &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>

出典

2017-08-21 20:48:07 gaetanoM

ありがとう！これを読んでいる人のために。この応答は、受け入れられたものと同じ回答ですが、追加情報があります。さらに参考にしてください。 – TonyO

SimpleModalは - まだモーダルを設定した後、モーダル後ろにスクロールすることができます：真

答えて

関連する問題