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

Question

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>

Mike · Accepted Answer · 2013-05-11 10:54:47Z

3

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"
});

answered May 11, 2013 at 10:54

Mike

6887 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shafqat Masood · Accepted Answer · 2013-04-30 13:52:00Z

0

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

answered Apr 30, 2013 at 13:52

Shafqat Masood

2,5601 gold badge19 silver badges23 bronze badges

Comments

Bala Subramaniam · Accepted Answer · 2013-04-30 13:59:23Z

0

<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

edited Apr 30, 2013 at 13:59

answered Apr 30, 2013 at 13:55

Bala Subramaniam

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related