Scroll jQuery UI dialog boxes

This allows you to scroll dialog and modal boxes in jQuery so they don't disappear from the screen as the user scrolls the window.

HTML

<h1>Properly Scrolling UI dialog and modal windows</h1>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<p align="center">
    <button id="popupDialog">First, click me to launch the dialog</button>
</p>

<h2>Now we add content so you can scroll the page and watch as the popup dialog scrolls with you!</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae aliquet erat. Aliquam eu rutrum tortor, eget dignissim eros. Nullam cursus aliquam lectus, eu tempor mi fringilla a. Morbi egestas, mi eu pretium pharetra, nisi diam vehicula felis, et sollicitudin massa ligula sed nunc. Mauris faucibus libero nec libero lacinia, sit amet adipiscing massa iaculis. Ut vestibulum, lacus quis lacinia convallis, nisl mi pharetra nulla, at ornare mi velit non dolor. In sagittis porttitor justo sed molestie. Ut congue augue eget neque posuere, quis sagittis nibh dapibus. Quisque gravida felis at neque ultricies, ut gravida felis porta. Vestibulum convallis sollicitudin sagittis. Vivamus eu hendrerit massa, id rutrum nibh. Fusce nulla orci, aliquam et tempor eu, ullamcorper non erat. Aliquam varius ut erat a ultrices. Sed dignissim, nunc at pulvinar ullamcorper, mauris neque dictum nunc, mollis posuere odio turpis in ipsum. Nullam eu pretium massa. Aenean facilisis enim tincidunt felis vestibulum sollicitudin. Quisque sit amet mauris faucibus, consectetur nisl sed, porta lectus. Mauris aliquet lorem eu metus vestibulum viverra. Aliquam mollis placerat nibh, id egestas augue fermentum vitae. Suspendisse nec magna vitae urna euismod tincidunt et eget lectus. Morbi tempus volutpat mi quis laoreet. Donec vehicula, augue in dapibus dictum, enim nibh commodo nisl, quis convallis est ligula sit amet augue. Morbi in dui sollicitudin, sodales est quis, hendrerit turpis. Suspendisse luctus suscipit mollis. Sed a lectus a elit...

JavaScript

$(document).ready(function () {
   
    
        $("#dialog").dialog();
  

    $(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
            });
        }
    });
});