jQueryUI dialog scrolls to top when clicking close button in IE

Question

Clicking the dialog title bar causes IE to scroll the page to the top of the dialog if the dialog is positioned partially off the page. But this also happens if a user clicks on the close button as well. This means the user has to click on the close button twice.

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

I created a jsfiddle to demonstrate: http://jsfiddle.net/e9zAK/

Reposition the dialog until it is partially off the screen. Then try to click the close button. It will scroll the page to fit, but not actually close the dialog. This does not seem to happen in Firefox or Chrome.

Is there a way to override this functionality? I do not want to use position:fixed.

Tisman

Answer 1

More of IE's strangeness. It sends the mousedown event, but not the mouseup and thus not the click event. I don't know what causes this, but you can work around it by binding a listener to mousedown:

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

This looks like a somewhat nasty hack, but these seem to be the common approach when dealing with IE.

Avidin

Thanks for finding the root cause, but that didn't seem to prevent it. (jsfiddle.net/e9zAK/1). I'll keep digging around too. – Tisman

You have it in the wrong order, in your fiddle. Put it after the call to .dialog(), or alternatively use event delegation: jsfiddle.net/blgt/e9zAK/2 – Avidin

Answer 2

I came here because I had a similar issue. In my case it was happening in Chrome (53.0.2785.143 m, Windows) and was triggered when clicking a button placed inside the title bar, causing a jump when the page, with its dialog, was scrolled down some (or several) pixels from the top, placing it again to the top of the window, and not triggering what the button was supposed to do.

After some investigation, mainly with the help of Chrome js debugger itself, I found an event listener on ui-dialog-titlebar, which corresponds to the dialog title bar, and whas triggered with the mousedown event (more info on circa line 9161, file jquery-ui.js, jQuery UI v1.9.2; probably it is solved in more recent versions). After that it was clear that removing the handler would solve the problem, which I did on the open event in the dialog initialization code:

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

Note that this will probably interfere in case you have some dragging action related to the title bar, though.

Shelve

perfect, this what finally fixed it for me. Luckily i dont have any ondrag events for the title bar.. – Neckpiece