Modal Dialog Opening Offscreen After Scrolling Browser Window

Sounds like position: 'center' doesn't take scroll position into account.

Please note that the behavior occurs regardless of the position option. It appears that calling .dialog('open') causes the viewport of the browser window to scroll to the top of the page. The dialog appears in the correct position in the former viewport (i.e., if I scroll the window back down to where it was before the call, the dialog is visible in the correct location). So it appears to be calculating the position correctly -- just that the browser window has been scrolled first so that the dialog is displayed outside of the viewport. Hope that description makes sense.

I found a workaround to this issue (as it was affecting me too)... It's not *that* pretty, but it works.

Install http://plugins.jquery.com/project/ScrollTo (the ScrollTo plugin). Before you issue a $(...).dialog('open') command, run: $.scrollTo(0,0);

This will scroll the browser window to the top left and will make the modal dialog appear correctly. It jumps around a little bit, so it's not *that* pretty... But it works.

Tested on FF 3.5 & IE8.

For a clearer example:

$("#dialogLink").click(function (e) {

$.scrollTo(0, 0);

$('#dialog').dialog('open');

});

I can't reproduce the viewport scrolling problem. Tested in Firefox 3, Safari 3, Opera 9, IE 6. Please attach a test page and say which browser you're having problems with.

Hi!

I've got the same problem.

You can reproduce it when using '<a href="#" onclick="$('#detail_0').dialog('open')">Show detail 0</a>' instead of a button, in a tall enough table to have to scroll.

Happens with Firefox 3.0, Chrome 2.0, IE 8.0

ps : Is it possible to reopen this ticket?

This happening because when using a link (a tag) href='#' causes the window to redraw, which resets the scroll bars.

Been looking for a solution as well and found this ticket.

Not to mess with jQuery code, a solution to this problem would be to bind a handler to the click event of the link.

<a href='#' id='btn'>My Button</a>

in javascript write:

$(function(){

$('#btn').bind('click', handleButton);

});

function handleButton(event){

event.preventDefault(); This will prevent the unwanted redraw behavior, as if no link is clicked.

Then init your dialog

$(#dialogDiv).dialog();

}

Besides that this is best practice, by not including any logic in your html, it also solves the above problem.

hope that helps.

If you are using an anchor tag to open the dialog box, just place a return false; inside of your function.

$('a').click(function(){
    $('.dialog-box').dialog('open');
    return false;
});

I've attached a slightly modified demo example of modal-message.html.

To reproduce the viewport problem, type the url modal-message.html#anchor in Chrome 5.0.342.9 beta for Ubuntu.

the problem does exist. i had to calculate the current position of the windows scroll using $("html").scrollTop() before the creating the dialog. In the open function of the dialog, the statement is to restore the scroll value i had calculated previously. this way, the user doesnt perceive any "jump" to the bottom of the page.

Any progress on this ticket? It has become somewhat of a show-stopper.

I can confirm that it has nothing to with "anchor tag to open the dialog box".

The browser does not jump all the way to the top.

The dialog window appears in the correct position.

The problem is with the browser scrolling on dialog open.

Could some please provide some sort of feedback?

Thanks guys!

We still haven't seen a page that shows this problem. The page posted by ThinkrR is invalid because browsers don't scroll to anchors until after the dialog is visible.

In my specific case the problem was in css. Removing the following fixed the issue:

html,body {

overflow: auto;

}

(just documenting in case someone else is running into this issue)

We don't support specifying any dimension-related styles on html or body.

This will fix the issue

after the

open:function(){

set the ui-dialog class to the top

$('.ui-dialog').css("top","0px");

I noticed that ui-dialog was being set with the number of pixels I scrolled down.

This is still broken.

I believe it is actually caused by the focus call towards the end of the open function (in my copy line 6165).

    $(self.element.find(':tabbable').get().concat(
       uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
          uiDialog.get()))).eq(0).focus();

This gets called when the dialog is first added. I tried to create a test case, but after lots of futzing around in firefox I've found the state of the uiDialog is inconsistent depending on where I set my breakpoints and step through the code. I think there may be a timing issue. Sometimes the position is 0,0, and sometimes it is in the expected position.

I believe that there is probably an asynchronous component to the jquery position call, and that perhaps on very complex pages the lag is enough that calls are being made out of the expected order. Wrapping the focus call in a setTimeout() fixes the problem, which lends credence to that idea.

        setTimeout(function() {
    		$(self.element.find(':tabbable').get().concat(
	    		uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
		    		uiDialog.get()))).eq(0).focus();
        }, 200);

Perhaps you could introduce something similar into the next version for those of us plagued by this problem.

I'm having this problem under Firefox 5.0 but not under Safari/Chrome