jQuery UI Dialog Positioning Bug

by markallgood

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css">
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<div id="dialogOpener">Open Dialog</div>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long page</p>
<p>Test to make long...

CSS

#dialogOpener {
    border: 2px solid red;
}

.dialog-fixed { 
    position: fixed; 
}

JavaScript

$(function() {
    $("#dialogContent").dialog({
        autoOpen: false,
        modal: true,
        title: "Dialog Title",
        position: { my: "center", at: "center", of: window },
        resizable: false,
        show: "fade",
        dialogClass: "dialog-fixed",
        open: function(event, ui) {
            $(event.target).dialog("option", "position", { my: "center", at: "center", of: window })
        }
    });
    $("#dialogOpener").click( function() {
        $("#dialogContent").dialog("open"); //.dialog("option", "position", { my: "center", at: "center", of: window });
    });

    $(document.body).scrollTop($("#dialogOpener").offset().top - 100);
});