JQuery模式对话框显示了使用附加的覆盖后面

本文关键字：覆盖 对话框 模式 显示 JQuery | 更新日期: 2023-09-27 18:20: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'); }

按钮不会启动，因为它一直在表单之外。

然而，当我把它放进去使按钮工作时，表单出现在模态覆盖后面，并且是不可点击的。

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

JQuery模式对话框显示了使用附加的覆盖后面

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

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

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

此片段将允许您将对话框附加到窗体，并通过设置覆盖和对话框上的z索引将覆盖保留在窗体后面。

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