jQuery Modal Dialog is disabled (gray out) when popup in asp.net

Question

I have a jquery modal dialog called from code behind, when it's pop up, it's just disabled, I can select or click on the form. Here is my code

Script:

    $(document).ready(function() {     
       $("#addrDialog").dialog({              
           modal: true,
           autoOpen: false,
           appendTo: "#form",
           resizable: false,
          draggable: false,
          closeOnEscape: false,
          width: "auto",
          show: "fade",
          hide: "drop",
          open: function () {
              $(".ui-dialog-titlebar-close").hide();                  
          },
          buttons: [{
              text: "Select",
              click: function () {
                  var value = " ";
                  storedIndex = " ";
                  var selected = $("[id*=lstCandidates] option:selected");
                  selected.each(function () {
                      value = $(this).val();
                      storedIndex = $(this).index();
                      $("#hIndex").val(storedIndex);
                  });
                  $(this).dialog("close");
              },
              style: "margin-right: 40px;"
          },
                    {
                        text: "Cancel",
                        click: function () {
                            $(this).dialog("close");                                
                        },
                        style: "margin-left:0px;"
                    }]
      })
     });

  function AddrDialog() {
      $(function () {
          $("#addrDialog").dialog("open");             
          return false;
      });
  }

This is my page:

     <div id="parentForm">
    <input type="hidden" id="hIndex" value="<%=strIndex%>" name="hIndex" />
    <input type="hidden" id="hdnBtnPostback" name="hdnBtnPostback" />

<div>
    <p>
        <asp:Label ID="lblStreet" runat="server" Text="Street Address:" AssociatedControlID="txtStreet"></asp:Label>
        <asp:TextBox ID="txtStreet" runat="server" MaxLength="50" Text="30 Rockefeller Plaza"></asp:TextBox>        
        <asp:Label ID="lblCity" runat="server" Text="City:" AssociatedControlID="txtCity"></asp:Label>
        <asp:TextBox ID="txtCity" runat="server"  MaxLength="20" Text="New York" ></asp:TextBox>       
         <asp:Label ID="lblState" runat="server"  Text="State:" AssociatedControlID="txtState"></asp:Label>
         <asp:TextBox ID="txtState" runat="server" Enabled="False" Text="NY" MaxLength="2"></asp:TextBox>        
        <asp:Label ID="lblZip5" runat="server" Text="10112" AssociatedControlID="txtZip5"></asp:Label>
        <asp:TextBox ID="txtZip5"  runat="server" MaxLength="5" ></asp:TextBox>        
        <asp:Label ID="lblZip4" runat="server" Text="-" AssociatedControlID="txtZip4"></asp:Label>
        <asp:TextBox ID="txtZip4" runat="server" MaxLength="4"></asp:TextBox>
    </p>
</div>

<asp:Button runat="server" ID="cmdSave" Text="Save" OnClick="cmdSave_Click" />   
<div id="addrDialog" title="Address Candidates" style="display:none">        
    <asp:ListBox ID="lstCandidates" runat="server" />
</div>

This is my code behind:

  protected void cmdSave_Click(object sender, System.EventArgs e)
    {
       .....//Call Web Service
        if (count > 0)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "AddrDialog", "AddrDialog();", true);
        }
     }

Note: I tried to post the screen image but I don't have enough reputation, sorry :)

What did I missed here, please help. Thank you

score 1 · Answer 1 · answered Sep 10 '15 at 21:47

1

In Web Forms, you need to make sure the dialog gets appended to the form in order to work properly. Add this parameter when instantiating it.

appendTo: "form"

answered Sep 10 '15 at 21:47

mason

31,774
10
77
121

I just add the appendTo: "form" (edited code) when I initiated the dialog, the result is the same, thanks for replying – Jenny Sep 10 '15 at 22:09
I had to add both the call to `parent().appendTo()` and the parameter `appendTo` on the dialog. – Codes with Hammer Jan 11 '16 at 16:08

score 1 · Answer 2 · answered Sep 15 '15 at 21:08

1

The modal works perfectly now. I added a line of code when the dialog open:

   function AddrDialog() {
  $(function () {
      $("#addrDialog").dialog("open");  
       $("#addrDialog").parent().appendTo($("form:first"));            
      return false;
  });

answered Sep 15 '15 at 21:08

Jenny

15
8

Thanks! I had a similar issue, where the modal dialog caused a tinted gray box to cover most of the form, and the dialog (similar to http://stackoverflow.com/q/17911918/2615836, but without Bootstrap). Your fix resolved my issue. – Codes with Hammer Jan 11 '16 at 15:59

jQuery Modal Dialog is disabled (gray out) when popup in asp.net

2 Answers2