SimpleModal - Kann immer noch hinter modal blättert nach modal Einstellung: true

Also ich bin mit SimpleModal (http://www.ericmmartin.com/projects/simplemodal/)SimpleModal - Kann immer noch hinter modal blättert nach modal Einstellung: true

und ich kann nicht scheinen, um es hinter dem modalen Scrollen zu blockieren.

modal [Boolean: true] Der Benutzer kann nicht mit der Seite unter dem Modal oder der Registerkarte außerhalb des Dialogfelds interagieren. Bei false werden das Overlay, der Iframe und bestimmte Ereignisse deaktiviert, sodass der Benutzer mit der Seite unter dem Dialog interagieren kann.

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 
    } 
});

}

Sie werden sehen, ich habe modal: wahr, aber ich kann immer noch hinter dem modalen scrollen. Gibt es etwas, das mir fehlt?

Quelle

2017-08-21 TonyO

Ich bin nicht mit diesem Plugin vertraut, aber ich würde vermuten, dass es etwas mit dem Iframe in Ihrem Modal zu tun hat.

Das heißt, Sie können die onOpen() und onClose() Callbacks verwenden, um dies zu erreichen.

onShow: function(dialog) { 
    $("body").addClass("no-scroll"); 
    }, 
    onClose: function(dialog) { 
    $("body").removeClass("no-scroll"); 
    $.modal.close(); //Must call this for the plugin to work 
    },

Das CSS für Ihre <body> Element ist einfach:

.no-scroll { 
    margin: 0; 
    height: 100%; 
    overflow: hidden 
}

ich ein Beispiel auf JSFiddle here setzen.

Quelle

2017-08-21 20:39:53

Vielen Dank! das macht Sinn und funktioniert perfekt. – TonyO

Um den Körper zu hemmen Scrollen Sie auf modal zeigen den Stil hinzufügen:

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

und auf modal schließen müssen Sie, dass entfernen:

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

Die Schnipsel (aus einer Demo):

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>

Quelle

2017-08-21 20:48:07 gaetanoM

Danke! Für jeden, der das liest. Diese Antwort ist die gleiche Antwort wie akzeptiert, aber mit zusätzlichen Informationen. Großartig für weitere Referenz. – TonyO

SimpleModal - Kann immer noch hinter modal blättert nach modal Einstellung: true

Antwort

Verwandte Themen