jquery - 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-heightCSS 来解决这个问题。但这似乎很草率。我首先需要了解是什么让它表现得像这样。有什么想法可以让我dialog()采取行动吗？非常感谢。地点

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

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