Centering a JQuery Dialog

center-jquery-dialog.php

<script type="text/javascript">
    //<![CDATA[
jQuery.noConflict();
jQuery(
    function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		//jQuery( "#dialog:ui-dialog" ).dialog( "destroy" );
		jQuery( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 600,
			width: 900,
			modal: true,
            open: function( event, ui ) {
                //center the dialog within the viewport (i.e. visible area of the screen)
               var top = Math.max(jQuery(window).height() / 2 - jQuery(this)[0].offsetHeight / 2, 0);
               var left = Math.max(jQuery(window).width() / 2 - jQuery(this)[0].offsetWidth / 2, 0);
               jQuery(this).parent().css('top', top + "px");
               jQuery(this).parent().css('left', left + "px");
               jQuery(this).parent().css('position', 'fixed');                
            },
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
			}
            
		});
	}
);

    //]]>
</script>

<div id="dialog-form" title="<?php echo $this->getText('TEXT_EDIT_APPROVED_TO_BE_COSTED_VALUES'); ?>">
    <?php if (!empty($this->view_data_object->outputs)) : ?>
        <form action="<?php echo $this->actionHref('components/update-approved-for-costing-vals/'.$this->view_data_object->project_id); ?>" method="post" enctype="multipart/form-data">
            <?php foreach ($this->view_data_object->outputs as $output): ?>
                <h3><?php echo $output->output; ?></h3>
                <?php if (sizeof($output->components) > 0): ?>
                    <table class="data" cellspacing="1">
                        <tr>
                            <th><?php echo $this->getText('TEXT_COMPONENT'); ?></th>
                            <th style="width: 13%;"><?php echo $this->getText('TEXT_APPROVED_2_B_COSTED'); ?></th>
                        </tr>
                    <?php $class = 'even'; ?>
                    <?php foreach ($output->components as $component): ?>
                            <?php $class = $class == 'odd' ? 'even' : 'odd'; ?>
                            <?php $checked =  $component->can_move_to_costing ? 'checked="checked"' : ''; ?>
                            <tr class="<?php echo $class; ?>">
                                <td><?php echo $component->title; ?></td>
                                <td>
                                    <input type="checkbox" 
                                           name="components[<?php echo $component->component_id ?>]" 
                                           value="1" 
                                           <?php echo $checked; ?>
                                    />
                                </td>
                            </tr>
                    <?php endforeach; ?>
                    </table>
                <?php endif; ?>
            <?php endforeach; ?>

            <div class="float-right" style="padding: 15px 0px;">
                <input type="submit" 
                       name="saveButton" 
                       value="<?php echo $this->getText($this->saveBtnTextLocaleKey); ?>" 
                       class="button" 
                       id="saveButton" />
                <input type="button" 
                       name="cancelButton" 
                       value="<?php echo $this->getText($this->cancelBtnTextLocaleKey); ?>" 
                       class="button" 
                       onclick="jQuery( '#dialog-form' ).dialog( 'close' );" 
                       id="cancelButton" />
            </div>
        </form>
    <?php endif; //if (!empty($this->view_data_object->outputs)) ?>
</div>
<!-- End dialog-form form -->