如何修复在站点上垂直扩展的jQuery对话框?

我有一个jQuery对话框,定义如下

<div id="emaildialog" title="Contact Us">
    <!-- Html.RenderPartial("ContactUs"); -->
    <div>This is a test</div>
</div>


<script type="text/javascript">
    (function ($) {
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
            $( "#emaildialog" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
                width: 700,
                modal: true,
                position: 'center'
            });

            $( "#viewselected" ).click(function() {
                $( "#emaildialog" ).dialog( "open" );
                return false;
            });
        });                
    })(jQuery);
</script>

当我单击导致对话框显示的按钮时,对话框位于屏幕中央,但它横跨we页面的整个高度。具体来说,标题栏本身会拉伸,对话框底部的内容看起来很好。

有人知道是什么引起的以及如何解决吗?

我注意到一件奇怪的事。如果我单击对话框的侧面来调整对话框的大小,那么它会正确地重新绘制自己,在检查css时,我注意到对话框的位置从相对更改为绝对,但这都是在jQuery UI中完成的,所以我不确定如何在代码中修复它。

我使用的css链接自google:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/
    1.7.2/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />

您可以在这里看到css的站点: http://dev.thinkterrabella.com/