c# - JQuery 模态对话框使用追加显示在叠加层后面

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() 的按钮。