jQuery Tutorial: Scroll UI dialog boxes with the page as it scrolls
Do you have a jQuery UI modal dialog box that you want to scroll down as the page scrolls? I tried searching for someone who’d figured out a way to do it but I couldn’t find any search results for this particular situation. So I did the grunt work myself and thought I’d share it with you. This will scroll the dialog and the modal overlay so they stay correctly positioned on the page even if the user moves the browser window scroll bar with their mouse pointer or a mouse scroll wheel.
Scroll UI Dialog With the Page
$(document).ready(function() {
$(document).scroll(function(e){
if ($(".ui-widget-overlay")) //the dialog has popped up in modal view
{
//fix the overlay so it scrolls down with the page
$(".ui-widget-overlay").css({
position: 'fixed',
top: '0'
});
//get the current popup position of the dialog box
pos = $(".ui-dialog").position();
//adjust the dialog box so that it scrolls as you scroll the page
$(".ui-dialog").css({
position: 'fixed',
top: pos.y
});
}
});
});
Demo and Code
Want to see how it works? Try the working JSFiddle demo and see for yourself.
