Window scrolling up when jquery dialog opens up

Question

I am trying to open a modal jquery dialog using jquery 1.4 and jquery-ui-1.8rc3.custom.js

The dialog opens up with no issues, in all browsers, but in IE 7 and 6, after the dialog opens up, the window scrolls itself to the buttom... I tried scrolling the window up back to the modal position but is very inconsistent. was using the following line of code after opening up the modal

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

One weird thing I am noticing is that after I open the modal, the page becomes huge... as if some extra things adds up on the bottom .... and it eventually scrolls to the bottom. Any idea why this could be hapenning

in html

<div id="selector">
</div>

in document.ready

$('#selector').dialog({
  bgiframe: true,
  autoOpen: false,
  width: 100,
  height: 100,
  modal: true,
  position: 'top'
});

in js

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

Answer 1

If you're using an anchor tag like below to trigger the dialog

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

you'll want to add a return false; to the onclick attribute:

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

This prevents the page reloading to anchor # which causes it to jump to the top.

Answer 2

I was struggling with this issue too. I didn't use any theming so I didn't have this important CSS property:

position:absolute;

I added this to my CSS file and all works fine now:

.ui-widget { position: absolute; }