JQuery 模态对话框使用附加显示在叠加层后面答案

【问题标题】：JQuery modal dialog shows behind overlay using appendJQuery 模态对话框使用附加显示在叠加层后面
【发布时间】：2013-06-28 14:44:13
【问题描述】：

我有一个包含一些内容的 div，我想弹出给用户，所以他们必须在提交之前同意：

<div id="terms" style="display:none">
        <p style="font-weight:bold">If your data is not backed up in advance, you may have to forfeit your booked slot and rebook the handover on another date.</p>
        <asp:CheckBox ID="cbTerms" ClientIDMode="Static" CssClass="error" Style="font-size:0.8em" Text =" I understand the above, and will ensure my data is backed up prior to the handover date" runat="server" /> 
        <p style="text-align:right"><asp:Button ID="btnSubmit" ClientIDMode="Static" runat="server" Text="Submit" OnClick="btnSubmit_Click" Enabled="False" /></p>
    </div>

我正在使用 jQuery UI 对话框来实现这一点：

    $('#terms').css('visibility','block');
    $('#terms').dialog({ 
           modal: true, 
           width: '500px', 
           title: 'IMPORTANT! Remember To Backup Your Laptop', 
           open: function (event, ui) { 
                 $('.ui-dialog-titlebar-close').hide(); 
                 $(this).parent().appendTo('form'); }, 
     });

如果我遗漏了：

$(this).parent().appendTo('form'); }

按钮不会触发，因为它已在表单之外。

但是，当我将其放入以使按钮起作用时，表单出现在模态叠加层后面并且无法点击。

我正在使用母版页 - 不确定这是否相关。

【问题讨论】：

你尝试改变你的z-indexes吗？任何时候网页上某物在某物的后面或前面时，您都需要修改您的 z-index。

标签： c# jquery jquery-ui

【解决方案1】：

我会将对话框添加到文档节点，并将事件处理程序添加到调用 form.submit() 的按钮。

【讨论】：

此处理程序可以在打开对话框时使用buttons 选项添加：api.jqueryui.com/dialog/#option-buttons

【解决方案2】：

这似乎只发生在最新版本的 JQuery 中并且如果您使用附加选项。

不幸的是，当控件在 UpdatePanel 中时从 JQuery 提交表单会导致整个页面刷新。

此 sn-p 将允许您将对话框附加到表单并通过在叠加层和对话框上设置 z-index 来保留叠加层。

open: function (type, data) {
                $('.ui-dialog').css('z-index', 103);
                $('.ui-widget-overlay').css('z-index', 102);
                $(this).parent().appendTo("form");
            }

【讨论】：