Question

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

enter image description here

我的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

  $(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');
      });
     });

Answer 3

<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>

使用上述方法

JQueryUI对话模式表单在ASP.Net中打开但不可访问

3 个答案: