Question

I have a page that has a table on it with hyperlinks that open up a dialog box. The pages is pretty long and a every row has a link that open up a dialog box that loads a external page.

If I click any link before I scroll the dialog box opens in the middle of the screen fine. If I scroll down the page and then click on a link the dialog box open in the middle of where I am on the page but the browser is automatically scrolling to the top of the page. So depending where you are on the page you cannot see the dialog box at all.

I have tried to set the position of the dialog to the top like this: $('.selector').dialog({ position: 'top' });. I have also tried to do it by setting the position to absolute like this: .ui-widget { position: absolute; }

None of that worked. I cannot seem to get it to work. I am okay with it opening the dialog at the top of the page or in the middle but I need the page to not scroll away from the dialog.

Here is a little example of what is going on – Dialog Test

I have tested this in Firefox, chrome, safari and IE. They all do pretty much the same thing.

Any help with this would be great.

Thanks

Answer 1

When the href of an anchor is an ID selector (#<id>), the browser navigates to the element with that ID. If no ID is specified, the browser goes to the top of the page.

Cancel the anchor’s default behavior by returning false in the handler:

$(".vd").click(function(){
    $("#detailWin").dialog("open");
    return false;
});

Another solution to avoid this in general is to set the href to javascript:void(0)

<a href='javascript:void(0)'>Open dialog</a>