如何让 jQuery UI 对话框显示为对话框（而不是固定在页面底部）？答案

【问题标题】：How can I get a jQuery UI Dialog to display as a Dialog (instead of being pinned to the bottom of the page)?如何让 jQuery UI 对话框显示为对话框（而不是固定在页面底部）？
【发布时间】：2016-05-11 21:06:12
【问题描述】：

在将 html 替换为我自己的 html 之前，将想法 here 用作“概念验证”，我将改编自该 html 的 html 添加到我的 Index.cshtml 文件（ASP.NET MVC 应用程序）中：

<div id="dialog-message" title="Important information">
    <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
    <div style="margin-left: 23px;">
        <label>
            Add additional Email:
        </label>
        <input type="text" id="addlemail" />
        <button id="btnSaveAddlEmail">
            Save
        </button>
    </div>
</div>

...以及该文件的脚本部分中的此 jQuery 以打开该 div（单击处理程序中先前的普通警告已被注释掉）：

$('#dialog-message').dialog({
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx'
});

$("#btnAddlEmail").click(function () {
    //var email = prompt('Please enter the email address', 'name@provider.com');
    //if (null != email) //&& (email != "name@provider.com")
    //{
    //    alert(email);
    //}
    $('#dialog-message').dialog('open');
}); // $("#btnAddlEmail").click(function ()

但是，当我单击“+ 添加另一封电子邮件”时，“对话框”仅显示在页面底部，而不是模式对话框中：

（我也不知道“关闭”按钮是从哪里发出的）。

注意：按照here 所讨论的here 中的步骤，我已经（大概无论如何）完成了使jQuery UI 在我的项目中工作所必需的工作。

为了让对话框充当模态对话框而不是日志文件上的凹凸，我必须跳过什么环？

更新

我在 \Home\Index.cshtml 文件中添加了以下脚本引用：

@section Scripts
{
    <script type="text/javascript">

【问题讨论】：

您显示的代码工作正常（参考this fiddle）。如果你没有得到对话框，那么你没有包含 jquery-ui 的相关脚本和/或 css 文件。
我想我不知道在哪里添加它们；我尝试将它们直接添加到 .cshtml 文件的 Scripts 部分下方，但没有奏效。
您需要编辑您的问题以显示您加载脚本和 css 文件的位置。
您的编辑并未显示您正在加载任何脚本。在您的@section Scripts { 中，您需要包含jquery-{version}.js 和jquery-ui.js，然后您还需要包含相关的css 文件。

标签： jquery html asp.net-mvc jquery-ui jquery-ui-dialog

【解决方案1】：

快速修复：将您的 div 放在主要内容区域的顶部，以便它呈现在其他内容之上

要让对话框显示，请确保您包含模态的 css

【讨论】：

我把它放在 html 的哪个位置没有区别；它位于（Index.cshtml 文件的）html 部分的底部，我将其移至顶部，但在任一位置的行为完全相同。