jQuery popup Window Scroll

The requirement is fairly simple, I need to show a popup on 开发者_运维知识库click of a link in a table where the user clicked (X and Y coordinates). User can add tables from a list on a web page.

When the user clicks on a link for the first time, the popup does show at the right location but window scrolls to the bottom (focus is shifted to the bottom) and there's lot of extra space created beneath the table. This is annoying because now the user has to scroll up to see the table and the popup. Interestingly, this happens only on IE (ver. 7.0). I tested with Firefox, it works just fine.

Any help shall be appreciated.

Thanks Kunal

Sounds like you've got an anchor link (e.g. #footer) and it is jumping to that (note that the example I gave would jump to as it'll use any IDs as anchors).

You should call .preventDefault() on the javascript event. eg (jQuery):

$('a').click(function(e) {
    e.preventDefault();
    //other code...
});

Code regarding comments:

//get current position
var event = getEvent ( ffEvent );
event.preventDefault();
jQuery("#"+oMatrixModel.m_sPortletNameSpace+"popupDiv").dialog({
 position: [event.clientX,event.clientY], modal: true,
 resizable:false , height: 'auto', dialogClass: 'alert'
 });

Guys, I finally got it working, it was actually a CSS issue. I added the following snippet to a css my app uses and all worked fine:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }