jQueryUI-Dialog blättert nach oben, wenn Sie auf Schließen klicken. IE

Question

Wenn Sie auf die Titelleiste des Dialogfelds klicken, wird die Seite an den Anfang des Dialogfelds verschoben, wenn der Dialog teilweise außerhalb der Seite positioniert ist. Dies geschieht jedoch auch, wenn ein Benutzer ebenfalls auf die Schließen-Schaltfläche klickt. Dies bedeutet, dass der Benutzer zweimal auf die Schließen-Schaltfläche klicken muss.

$('#divDialog').dialog({height:500, position:[10, 1000]}); 

habe ich eine jsfiddle zu demonstrieren: der Dialog http://jsfiddle.net/e9zAK/

neu positionieren, bis sie teilweise aus dem Bildschirm ist. Versuchen Sie dann, auf die Schaltfläche zum Schließen zu klicken. Es wird die Seite scrollen, um zu passen, aber den Dialog nicht wirklich schließen. Dies scheint in Firefox oder Chrome nicht zu passieren.

Gibt es eine Möglichkeit, diese Funktionalität zu überschreiben? Ich möchte nicht position: fixed verwenden.

Answer 1

Mehr von IEs Fremdartigkeit. Es sendet das mousedown-Ereignis, aber nicht das mouseup und damit nicht das click-Ereignis. Ich weiß nicht, was dies verursacht, aber Sie können durch Bindung eines Zuhörers um ihn herum arbeiten, um MouseDown-:

$('.ui-dialog-titlebar-close').mousedown(function() { 
    $('#divDialog').dialog('close'); 
}); 

Dieses wie ein etwas gemeiner Hack aussieht, aber diese scheinen die gemeinsamen Ansatz zu sein, wenn sie mit IE zu tun.

Answer 2

Ich kam hierher, weil ich ein ähnliches Problem hatte. In meinem Fall geschah es in Chrome (53.0.2785.143 m, Windows) und wurde ausgelöst, wenn man auf einen Button innerhalb der Titelleiste klickte, der einen Sprung verursachte, wenn die Seite mit ihrem Dialog um einige (oder mehrere) Pixel nach unten gescrollt wurde das obere Ende, es wieder an den oberen Rand des Fensters, und nicht auszulösen, was der Knopf tun sollte.

Nach einigen Untersuchungen, vor allem mit Hilfe von Chrome js Debugger selbst, fand ich einen Ereignis-Listener auf ui-dialog-titlebar, die den Dialogtitelleiste entspricht, und whas ausgelöst mit den mousedown Ereignisse (weiteren Informationen auf circa Linie 9161, die Datei jquery-ui.js, jQuery UI v1.9.2, wahrscheinlich ist es in neueren Versionen gelöst). Danach war klar, dass die Prozedur zu entfernen, das Problem lösen würde, die ich auf dem open Ereignis im Dialog Initialisierungscode tat:

$(".selector").dialog({ 
    open: function(event,ui){ 
     $(this).parent().find('.ui-dialog-titlebar').unbind('mousedown'); 
    } 
}) 

Beachten Sie, dass dies wahrscheinlich für den Fall einmischen werden Sie einige Zugwirkung haben die im Zusammenhang Titelleiste, obwohl.