CODEWITHSUNDEEP
jqueryasp.netjquery-uimodal-dialog
TTCG
TTCG

Reputation: 9113

JQueryUI Dialog Modal Form Open but not Accessible in ASP.Net

I am trying to open the JQueryUI Modal Form with the text box and the button. It opened the form but I cannot access it. If I use the modal:false, I can access not only the form but also the items on the page. I want the modal one and restrict the access to underlying form items.

enter image description here

My Javascript code is as follow:

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

My ASP.Net Form codes are as follow:

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

Upvotes: 0

Views: 2085

Answers (3)

Mike
Mike

Reputation: 671

This is due to a change in jQuery UI v1.10, there is an appendTo setting that has been added, to address the asp.net workaround you're using to re-add the element to the form.

try

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

Upvotes: 3

Bala Subramaniam
Bala Subramaniam

Reputation: 1

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

Use the above Method

Upvotes: 0

Shafqat Masood
Shafqat Masood

Reputation: 2570

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

Upvotes: 0

Related Questions