Question

I have a long list of links which bring up different jQuery dialogs. When I scroll down to near the bottom of the page and click a link, it successfully opens my jQuery dialog but the dialog is not visible because the page has scrolled up to the top of the web page — the dialog shows up below the fold and the user has to scroll back down to see the dialog.

What I want is for the dialog to popup and be visible no matter how far down the page the link is.

Here is my simple dialog jQuery code:

$(function () {
    $('#dlg').dialog({
        autoOpen: false,
        height: 460,
        width: 680,
        modal: true,
        position: 'center'
    });

    $('.vidlink').click(function(e) {
        $('#dlg').dialog('open');
    });

});

You can see how it happens on this page:
http://www.ourlaughingplace.com/asp/park.aspx?step=3&locID=WDW&parkID=MGM&DLRparkID=MGM#

Scroll down to “Movie Clips” and click on “Fantasmic Finale” using IE9, if you scroll back down you see that the dialog opened just the way it should — it just came out below the fold.

I’ve tried setting the dialog position to ‘center’ and ‘top’ but still have same problem.

Answer 1

The value # for the href of the links correspond to the top of the document. With your current code, clicking on the link works as expected: the page is scrolled back to the top.

Either prevent default behavior of the <a> tags that opens the dialog:

$('.vidlink').click(function(e) {

    e.preventDefault();

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

});

Or change the href value of those tags to:

<a href="javascript:void(0)"></a>