jquery maintain scroll position for modal dialog

Question

If users are not authenticated and click something only authenticated users do then i am loading a modal dialog saying they need to login to perform this.

the modal contains a link which when clicked is meant to load a modal dialog with a login form.

this is what i have:

$("#login-link").click(function () {
        $("#dialog-unauthenticated").dialog("close");
        var x = $(this).position().left + jQuery(this).outerWidth();
        var y = $(this).position().top - jQuery(document).scrollTop();
        $("#dialog-form").dialog("open",{position:[x,y]});

    });

it works okay, the only problem is that the page does not maintain the scroll position. the dialog loads in the right place.

how can i maintaining page scroll position instead of it scrolling to the top?

A while ago I made a simple demo which uses cookies to remember the scroll position: http://vidasp.net/tinydemos/remember-scroll-position.html — Šime Vidas, Jan 18 '11 at 16:10
maybe these SO related question has the asnwer http://stackoverflow.com/questions/1155952/how-do-i-prevent-scrolling-to-the-top-of-a-page-when-popping-up-a-jquery-ui-dialo — Gajahlemu, Feb 14 '11 at 11:50

score 0 · Answer 1 · answered Jan 18 '11 at 16:01

when opening the first modal (or right before) - save the page (document? document.body?) scroll position into some variables. then, on your $("#login-link").click() function, set it to those values you saved. sorry I don't have code for you, but basicall it's

$(document).scrollTop() 
// or
$(document.body).scrollTop()
// or even without the $ function!

jquery maintain scroll position for modal dialog

1 Answers1