Example to close Ajax ModalPopUpExtender control on esc key press in asp.net using JavaScript

Introduction: In this article i am going to share the code trick to close/hide modal popup extender control of Ajax on keyboard's  Escape key press in asp.net using JavaScript.

Close ajax modalpopupextender on escape key press in asp.net using javascript
Click on image to enlarge

Description: Basically you will learn the following through this article:
  • How to open login form in popup window using Ajax ModalpopUpExtender control.
  • How to apply CSS style to make ModalPopUpExtender look better.
  • How to Close/ Hide Modal Pop Up on escape button press using javaScript.
Note: If you are not aware of Ajax ModalPopUpExtender control then it is recommended to read the article:
 Ajax ModalPopupExtender example to open login form in popup window in asp.net

In previous related articles i explained How to  Create login form/page and implement remember me next time checkbox and Create Login page/form and check username,password in asp.net using stored procedure and  Show jQuery notification pop up message box and hide after 5 seconds in asp.net and  Show message box and redirect to another page/website and Best example to implement stylish jQuery form validations  and Open and close pop up window in asp.net using javascript

While working on asp.net project it was required to open the login form in popup and close that popup on escape key press. So i used Ajax ModalPopUpExtender control to open the login panel in popup and used the javascript to close/hide the popup on escape key press.

Implementation: Let's create a demo website page to implement this functionality.
  • You need to place the following javascript in the Head tag of the asp.net design page(.aspx) to close the modal popupextender.

    <script type="text/javascript">
        function pageLoad(sender, args) {
            if (!args.get_isPartialLoad()) {
                //  adding handler to the document's keydown event
                $addHandler(document, "keydown", onKeyDown);
            }
        } 
        function onKeyDown(e) {
            if (e && e.keyCode == Sys.UI.Key.esc) {
                // if the key pressed is the escape key, then close the dialog
                $find('ModalPopupExtender1').hide();
            }
        }
    </script>

  • Let's create login form and suppose we want to open this login form in popup on click of login link. So we can use Ajax ModalpopUpExtender control for this purpose. Below is the full code.

In the < Head > tag of the asp.net design page(.aspx) place the below javascript as:

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function pageLoad(sender, args) {
            if (!args.get_isPartialLoad()) {
                //  adding handler to the document's keydown event
                $addHandler(document, "keydown", onKeyDown);
            }
        } 
        function onKeyDown(e) {
            if (e && e.keyCode == Sys.UI.Key.esc) {
                // if the key pressed is the escape key, then close the dialog
                $find('ModalPopupExtender1').hide();
            }
        }
    </script>

              // Add following CSS Style to give style to popup

    <style type="text/css">
    #loginform
    {
        min-width:200px;
        height:110px;
        background-color:#ffffff;
        border:1px solid;
        border-color:#555555;
        padding:16px 16px;
        border-radius:4px;
        -webkit-box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);
        -moz-box-shadow:0px 1px 6px rgba(75, 31, 57, 0.8);
        box-shadow: 0px 1px 6px rgba(223, 88, 13, 0.8);
    }
    .modalBackground
    {     
        background-color:#cad1d0;
        filter:alpha(opacity=80);
        opacity:0.8;
    }     
    .txt
    {
         color:#505050;  
    }
    .redstar
    {
        color: #FF0000;
    }      
    </style>
</head>

  • Now in the <body> tag of the asp.net design page(.aspx) design the page as:

<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>    
       <table>
       <tr>
      <td width="1100px" height="600px" align="center" valign="middle">
      <asp:HyperLink ID="btnLogin" runat="server" NavigateUrl="#">Login</asp:HyperLink></td>
       </tr>
       </table>
      
        <asp:ModalPopupExtender ID="ModalPopupExtender1"
         TargetControlID="btnLogin"
         PopupControlID="popUpPanel"
         CancelControlID="btnClose"
         BackgroundCssClass="modalBackground"
         DropShadow="true"
         runat="server">
        </asp:ModalPopupExtender>
        <asp:Panel ID="popUpPanel" runat="server">
        <div id="loginform">
        <table>
        <tr>
            <td><span class="txt">Username: </span><span class="redstar">*</span></td>
            <td><asp:TextBox ID="txtUserName" runat="server" placeholder=" UserName"
                    Width="186px"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvUserName" runat="server"
                    ErrorMessage="Please enter  User Name" ControlToValidate="txtUserName"
                    Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
                    </td>
        </tr>
        <tr>
             <td><span class="txt">Password: <span class="redstar">*</span> &nbsp;&nbsp;</span></td><td><asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder=" Password" Width="186px"></asp:TextBox>
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                 ControlToValidate="txtPwd" Display="Dynamic"
                 ErrorMessage="Please enter Password" ForeColor="Red" SetFocusOnError="True"></asp:RequiredFieldValidator>
             </td>
        </tr>
        <tr>
            <td></td><td><asp:Button ID="btnSubmit" runat="server" Text="Login" /><asp:Button ID="btnClose" runat="server" Text="Close" CausesValidation="false" /></td>
        </tr>  
  <tr>
            <td>&nbsp;</td><td><span class="txt">&nbsp;New User? Click Here For</span> <a href="#">Sign Up</a><b></b></td>
        </tr>
        </table>
        </div>
        </asp:Panel>
    </div>
    </form>
</body>

Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing  ModalPopupExtender control on design page.

Now run the application. You will see a login link. Click on it and login form will be opened in popup. You can close it by clicking on the close button or by pressing escape key from your keyboard.


Now over to you:
" I hope you have got the way to open the popup using ajax modalpopupextender and close that on escape key press  using javascript in asp.net and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

5 comments

Click here for comments
April 11, 2014 ×

Thanks Jayaprakash Tatagari for appreciating my work..i am glad you found this article useful..stay connected and keep reading for more useful updates like this...:)

Reply
avatar
May 27, 2014 ×

Thanks Sushant for your feedback..keep reading..

Reply
avatar
June 24, 2014 ×

$find('<%=modalWindow.ClientID%>').hide();

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..