jquery - JQueryUI 对话框模态表单在 ASP.Net 中打开但无法访问

Question

我正在尝试使用文本框和按钮打开 JQueryUI 模态表单。它打开了表格，但我无法访问它。如果我使用 modal:false，我不仅可以访问表单，还可以访问页面上的项目。我想要模态的，并限制对底层表单项的访问。

我的Javascript代码如下：

<script language="javascript" type="text/javascript">

        $().ready(function () {
            CreateDialog();

            $("#hlTest").click(function () {

                $("#dvDialog").dialog("open");
            });
        });


        function CreateDialog() {
            $("#dvDialog").dialog({
                autoOpen: false,
                height: 280,
                width: 440,
                modal: true,
                open: function () {
                    $(this).parent().appendTo($("form:first"));
                }
            });
        }

    </script>

我的 ASP.Net 表单代码如下：

<a href="#" id="hlTest">Test</a>

<div id="dvDialog" title="Comment">
    <b>Comment: </b>
    <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Rows="4" Columns="50" ValidationGroup="vDialog"></asp:TextBox>        
    <br />
    <asp:Button ID="btnSaveComment" runat="server" Text="Save" ValidationGroup="vDialog" OnClick="btnSaveComment_Click" />
</div>

Answer 1

这是由于 jQuery UI v1.10 中的更改，添加了一个 appendTo 设置，以解决您用于将元素重新添加到表单的 asp.net 解决方法。

尝试

$("#dvDialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     appendTo:"form"
});

Answer 2

<script language="javascript" type="text/javascript">
$().ready(function () {

    $("#dvDialog").dialog({
         autoOpen: false,
         height: 280,
         width: 440,
         modal: true,
         open: function () {
             $(this).parent().appendTo($("form:first"));
         }
    });

    $("#hlTest").click(function () {
         $("#dvDialog").dialog("open");
    });
});
</script>

使用上述方法

Answer 3

  $(function() {
    $('#dvDialog').dialog({
     bgiframe: true,
     resizable: false,
     modal: true,
     autoOpen: false,
     overlay: {
     backgroundColor: '#000',
     opacity: 0.5
     },
     buttons: {
      Ok: function() {
        $(this).dialog('close');return true;
      },
      Cancel: function() {
        $(this).dialog('close');return false;
      }
    }
   });

      $("#hlTest").click(function(event) {
        event.preventDefault();
        $('#dvDialog').dialog('open');
      });
     });