jQuery UI-Dialog - Das äußere Fenster scrollt beim Scrollen im Dialog

Ich verwende einen jQuery UI Dialog, um ein Popup mit einer Seite anzuzeigen. Wenn ich im Popup blättere und die Bildlaufleisten nach unten gehen, beginnt die übergeordnete Seite zu scrollen. Wie kann ich das Blättern der übergeordneten Seite beim Scrollen im Dialogfeld einschränken?jQuery UI-Dialog - Das äußere Fenster scrollt beim Scrollen im Dialog

Ich habe einen modalen Dialog mit dem folgenden Code erstellt.

// Dialog 
$('#dialog').dialog({ 
    autoOpen: false, 
    width: 800, 
    height: 550, 
    minHeight: 500, 
    maxHeight: 800, 
    minWidth: 500, 
    maxWidth: 900, 
    modal: true, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$('#AddNewItems').click(function() { 
    var currentURL = getURLOfCurrentPage(); 
    $('#dialog').dialog('open'); 
    $("#dialog").dialog("option", "width", 800); 
    $("#dialog").dialog("option", "height", 550); 
    $("#dialog").dialog("option", "draggable", false); 
    $("#dialog").dialog("option", "modal", true); 
    $("#dialog").dialog("option", "resizable", false); 
    $('#dialog').dialog("option", "title", 'My Title'); 
    $("#modalIframeId").attr("src", "http://myUrl"); 
    return false; 
});

Quelle

2010-08-03 NLV

ist das, was ich benutze:

$('#dialog').dialog({ 
    autoOpen: false, 
    width: 800, 
    height: 550, 
    minHeight: 500, 
    maxHeight: 800, 
    minWidth: 500, 
    maxWidth: 900, 
    modal: true, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    }, 
    open: function(){ 
     $("body").css("overflow", "hidden"); 
    }, 
    close: function(){ 
     $("body").css("overflow", "auto"); 
    } 
});

Quelle

2010-09-16 16:17:59 gurun8

Ja. Das funktioniert. Genau das habe ich getan. – NLV

Was für eine großartige Idee. Nie gedacht, den Überlauf des Körpers so zu verstecken. Gut gemacht! –

einfach brillant –

So etwas wie dies funktionieren könnte (dies ist nicht getestet):

<script type="text/javascript" language="Javascript"> 
    var stop_scroll = false; 
    function scrolltop(){ 
     if(stop_scroll == true){ 
      scroll(0,0); 
      // Or window.scrollTo(0,0); 
     } 
    } 
</script>

In Ihrem Körper-Tag (<body></body>)

<body onscroll="scrolltop();" >

Last, setzen stop_scroll auf true, wenn Sie den Dialog öffnen und falsch, wenn Sie es schließen. Diese

Quelle

2010-08-03 15:40:44

Dank. Lass es mich versuchen. – NLV

Danke. Es funktioniert großartig. Scroll (0,0) verursacht jedoch ein jumpiges und flackerndes Verhalten. Kann ich nicht etwas wie preventDefault() aufrufen und das Ereignis abbrechen? – NLV

Ich glaube nicht, dass Sie können (jemand kann mich korrigieren, wenn ich falsch liege). Ich glaube, das Ereignis wird nur aufgerufen, wenn die Scroll gestartet hat, nicht bevor es passiert. Deshalb verschieben wir die Bildlaufposition zurück auf (0,0). Es hat sich schon bewegt, bevor wir unsere Veranstaltung betreten haben. Froh, dass Sie es nützlich fanden. –

gurun8-Lösung am besten für mich gearbeitet. Ich brauchte jedoch einen Weg, dies global zu tun. Meine Anwendung verwendet Dialoge auf mehreren Seiten, und ich wollte nicht alle Instanzen aktualisieren.

Der folgende Code wird das Öffnen und Schließen aller Dialoge behandeln:

$('body').on('dialogopen', '.ui-dialog-content', function() { 
    var $dialog = $(this); 
    var $body = $('body'); 
    var height = $body.height(); 

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window 
    // from scrolling if the user reaches the end of the dialog's scrollbar. 
    $body.css('overflow', 'hidden'); 

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden. 
    $dialog.resize().on('dialogclose', function() { 
     // Show the main scrollbars and unbind the close event handler, as if the 
     // dialog is shown again, we don't want the handler to fire multiple times. 
     $body.css('overflow', 'auto'); 
     $dialog.off('dialogclose'); 
    }); 
});

ich jQuery v1.8.23 verwenden. Getestet habe ich diese im Internet Explorer 8, Internet Explorer 9, Firefox 17 und Chrome 19.

Quelle

2013-01-10 11:25:10

Ich benutze dies mit ein paar Modifikationen. Zuerst nehme ich das "Padding-Right" des Körpers und setze dies auf die Breite der Scroll-Leiste (direkt nachdem ich den Überlauf in "Versteckt" geändert habe). Dies verhindert, dass sich die Seite im Hintergrund verschiebt, was verwirrend ist. Beim Schließen des Dialogs setze ich das 'padding-right' zurück. Zweitens, bevor ich irgendetwas tue, prüfe ich, ob der "Überlauf" des Körpers bereits "versteckt" ist, und wenn ja, tue ich nichts. Dies kann passieren, wenn zwei Dialoge gleichzeitig geöffnet werden. –

jQuery UI-Dialog - Das äußere Fenster scrollt beim Scrollen im Dialog

Antwort

Verwandte Themen