Question

我有一些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'); }

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

然而，当我把它放入按钮工作时，表格会出现在模态叠加层后面，并且无法点击。

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

Answer 1

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

Answer 2

这似乎只发生在最新版本的JQuery上，如果你使用了追加选项。

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

此代码段允许您将对话框附加到表单，并通过在叠加层和对话框上设置z-index来将叠加层保留在其后面。

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

JQuery模式对话框使用append显示在叠加后面

2 个答案: