Jquery modal popup closing

Question

0.00/5 (No votes)

See more:

Hi all,
I have a jQuery modal popup, which i open from c# code on button click.
I can't close from code behind or even javascript.
I want to be able to close it from anchor tag or asp:Button. Tried a lot of ways didn't work.

Javascript:

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

JavaScript

<script type="text/javascript">
        function showmodalpopup() {
            debugger;
            $("#popupdiv").dialog({
                title: "Registration",
                width: 650,
                height: 450,
                modal: true,
                buttons: {
                    "close": function () {
                        $("#popupdiv").dialog('close');
                    }
                }
                //autoOpen: false,
                //show: 'fade',
                //hide: 'fade',
                //resizable: false
            });            
            //function closeDialog() {
            //    $(this).find("#popupdiv").dialog("close");
            //}
        };
        </script>

HtML:

ASP.NET

<div id="main">
   <div id="popupdiv" title="Basic modal dialog" style="display: none">
       <p>There is already a Master account holder associated with this account.<br />Do you want to request to be added as an additional user on the account?</p>
       <div class="span3" ><a href="#" id="showrole" style="text-align:center;color:#fff;background-color:#10466E;padding:5px;">Yes</a></div>
       <div class="span3"><a href="#" id="hidepopup" style="text-align:center;color:#fff;background-color:#10466E;padding:5px;" class="hidepop">No</a>
          <%-- <button type="button" id="closepopup">No</button>
           <asp:Button runat="server" ID="btnClose" Text="close" OnClientClick="closeDialog();"/>--%>
       </div>
       <div class="span4" id="role_div" style="display: none; margin-removed 10px;">
           Please choose a role
           <div class="controls">
               <asp:DropDownList runat="server" ID="Roles_drp" ValidationGroup="newuserGroupValidation">
                   <asp:ListItem Selected="true" Value="0">Please Choose</asp:ListItem>
                   <asp:ListItem>Admin</asp:ListItem>
                   <asp:ListItem>Installer</asp:ListItem>
                   <asp:ListItem>Sales</asp:ListItem>
               </asp:DropDownList><br />
               <asp:RequiredFieldValidator runat="server" ID="drpValidator" ControlToValidate="Roles_drp" ErrorMessage="Please select a role" ForeColor="Red" Display="Dynamic" SetFocusOnError="true" InitialValue="0" ValidationGroup="newuserGroupValidation"></asp:RequiredFieldValidator>
           </div>
       </div>
   </div></div>

c# code to open the popup:

C#

ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true); //to show the jQuery popup with the required info.

Please advise by showing what's wrong with my code so that the modal popup not closing.
Thank you

Posted 28-Aug-15 4:42am

Samira Radwan

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

hypermellow · Accepted Answer · 2015-08-28T04:55:00

Hi,

You should be able to close the dialog by referencing it by the 'this' keyword.
i.e.:

JavaScript

$(this).dialog('close');

Can you try changing your dialog close function to use:

JavaScript

$("#popupdiv").dialog({
    title: 'Registration',
    width: 650,
    height: 450,
    modal: true,
    buttons:{
        OK:function(){
            $(this).dialog('close');
        }
    }
 });

[EDIT]
If you are having trouble closing the dialog using the this keyword, or the original selector used to create the dialog (both of which should work), you can try the following approach:

JavaScript

var popup = $("#popupdiv").dialog({
     title: 'Registration',
     width: 650,
     height: 450,
     modal: true,
     buttons:{
         OK:function(){
             closeDialog();
         }
     }
  });
function closeDialog(){
    $(popup).dialog("close");
}

The above is not an elegant example, closing via the 'this' keyword is what you should be doing ... but it's worth mentioning as an option.

If neither of the above get you going again, then it would appear you have larger issues. As starting point, I would review your versions of jQuery, and jQueryUI

[/EDIT]

... hope it helps.