jquery ui对话框标题栏表现不正常

Question

我有一个非常标准的HTML页面，我正在尝试使用jQuery UI的对话框。我之前使用过这个对话框，通常情况下并不简单。但是，出于某种原因，我现在遇到一个问题，即在显示对话框时调用<div id="upload_only_dialog"></div>上的对话框是

1.制作对话框的标题栏，大约700px高，

2.将样式moderizer.js .placeholder应用于对话框中的所有文本

我不知道应用于对话框的占位符样式是什么（所有内容都是浅灰色文本），但真正令人困惑的是标题栏。我已经将有问题的HTML缩小到我文档的这一部分。当我删除它时，标题栏是适当的大小。当我更换它时，它是不可思议的超大。它似乎完全无害。这是：

<div class="triple_col_container secondary_panel" style="display:block">
    <div class="trip_col secondary_panel_copy">
        <p class="trip_col">
            Get in touch with us to get your project rolling!
        </p>
    </div>
    <div class="secondary_panel_content_wrapper">
        <div class="col_header secondary_panel_header">
            <h2 class="columns">
                Question or comment?
            </h2>
        </div>
        <div class="secondary_panel_col1">
            <p class="secondary_panel_label">
                First name:
                <span class="required_ast">
                    *
                </span>
            </p>
            <div class="secondary_panel_input_container">
                <input type="text" id="mail_first_name_input" class="secondary_panel_input pr"
                />
            </div>
        </div>
        <div class="secondary_panel_col2">
            <p class="secondary_panel_label">
                Last name:
                <span class="required_ast">
                    *
                </span>
            </p>
            <div class="secondary_panel_input_container">
                <input type="text" id="mail_last_name_input" class="secondary_panel_input pr"
                />
            </div>
        </div>
        <div class="tbc">
        </div>
        <div class="secondary_panel_col1">
            <p class="secondary_panel_label">
                Company name:
            </p>
            <div class="secondary_panel_input_container">
                <input type="text" id="mail_company_name_input" class="secondary_panel_input secondary_panel_long_input"
                />
            </div>
        </div>
        <div class="tbc">
        </div>
        <div class="secondary_panel_col1">
            <p class="secondary_panel_label">
                Email:
                <span class="required_ast">
                    *
                </span>
            </p>
            <div class="secondary_panel_input_container">
                <input type="text" id="mail_email_input" class="secondary_panel_input secondary_panel_long_input pr re"
                />
            </div>
        </div>
        <div class="tbc">
        </div>
        <div class="secondary_panel_col1">
            <p class="secondary_panel_label">
                Your message:
                <span class="required_ast">
                    *
                </span>
            </p>
            <div class="secondary_panel_input_container">
                <textarea id="mail_message_input" class="secondary_panel_input secondary_panel_long_input pr"></textarea>
            </div>
        </div>
        <div class="tbc">
        </div>
        <a id="mail_submit" class="hover_button">Submit</a>
    </div>
</div>

我知道我可以添加一些max-height css来解决这个问题。但这似乎很草率。我需要了解是什么让它首先表现得像这样。关于这里有什么想法可以让我dialog()采取行动？非常感谢。 SITE

用于对话框的HTML <div id="upload_only_dialog" title="Upload a file without placing an order"> </div> JS for dialog

$(document).ready(function () {

    $("body").on("click", "#upload_only_trigger", function () {


        $("#upload_only_dialog").dialog({
            width: 380,
            height: 523,
            modal: true,
            position: 'center',
            closeOnEscape: false,
            open: function (event, ui) {
                //$('body').css('overflow', 'hidden');
            },
            beforeClose: function (event, ui) {
                //$('body').css('overflow', 'auto');
            }
        });
    });
});