Диалог jQueryUI прокручивается вверх, когда нажимает кнопку закрытия в IE

Щелчок по строке заголовка диалога заставляет IE прокручивать страницу в верхней части диалогового окна, если диалог расположен частично на странице. Но это также происходит, если пользователь нажимает кнопку закрытия. Это означает, что пользователю нужно дважды нажать кнопку закрытия.

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

Я создал jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/e9zAK/

Переместите диалог, пока он не будет частично удален с экрана. Затем попробуйте нажать кнопку закрытия. Он будет прокручивать страницу, чтобы она соответствовала, но фактически не закрывала диалог. Это, похоже, не происходит в Firefox или Chrome.

Есть ли способ переопределить эту функциональность? Я не хочу использовать позицию: исправлено.

Ответы

Ответ 1

Больше странности IE. Он отправляет событие mousedown, но не mouseup и, следовательно, не событие click. Я не знаю, что вызывает это, но вы можете обойти это, связав слушателя с mousedown:

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

Это выглядит несколько неприятным взломом, но, похоже, это общий подход при работе с IE.

Ответ 2

Я пришел сюда, потому что у меня была аналогичная проблема. В моем случае это происходит в Chrome (53.0.2785.143 м, Windows) и срабатывает при нажатии кнопки, расположенной внутри строки заголовка, вызывая скачок, когда страницу, с его диалогом, была прокрутило несколько (или несколько) из пикселей сверху, помещая его снова в верхнюю часть окна, а не запуская то, что должна была делать кнопка.

После некоторого исследования, главным образом, с помощью самого Chrome расслоения плотного отладчика, я нашел слушатель событий на ui-dialog-titlebar, что соответствует диалоговому строки заголовка, и WHAS срабатывает при mousedown события (подробнее о ках линии 9161, файл jquery-ui.js, jQuery UI v1.9.2, вероятно, он решается в более поздних версиях). После этого стало ясно, что удаление обработчика решит проблему, которую я сделал в событии open в коде инициализации диалога:

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

Обратите внимание, что это, вероятно, будет мешать, если у вас есть какое-то действие перетаскивания, связанное с заголовком.