jQuery Tutorial: Scroll UI dialog boxes with the page as it scrolls

Comments 14 Standard

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 anything 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.

Advertisements

14 thoughts on “jQuery Tutorial: Scroll UI dialog boxes with the page as it scrolls

  1. Sorry but I’m not fixing it for a version of IE that’s 2 versions behind…. either update to IE9 or IE10 or you’re own your own to fix it :p

  2. It’s not for my but for users who are still using IE that’s 2 versions behind… )
    And I do not ask you to fix it but I still need the solution. Thanks. )

  3. i tried this code which is working exactly what i need but it makes my scroll response bit slower so instead of calling this script at page load, i called it while opening the dialog, this fixes my scroll response. thanks

  4. You’ll have to grab the id of the dialog box after it opens and use that instead of the class I have it using in my example.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s