Home > AJAX, ASP.Net, Javascript > Hide AJAX ModalPopup Extender using Esc key

Hide AJAX ModalPopup Extender using Esc key

Hi all,

try this example to Hide AJAX ModalPopup Extender using Esc key

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
    <title>Untitled Page</title>
    .modalBackground {
    <form id="form" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript">
        function pageLoad(sender, args){
                //  add our 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, dismiss the dialog

        <div style="font-family:Tahoma; font-size:smaller">
            <p style="background-color:AliceBlue">
            Example page where a modal popup can only be dismissed by pressing the escape key
            <asp:Button ID="btnShowModal" runat="server" Text="Click to show Modal" />
            <asp:Panel ID="pnlModalPanel" runat="server" Style="display: none">
                The only way to close this is to press the 'esc' key.
                ID="mdlPopupExtender" runat="server"
                PopupControlID="pnlModalPanel"  />

Hope this helps

Good Luck

  1. Rafael
    April 29, 2011 at 5:21 pm


    To work, you have to use


    instead of

    • Rafael
      April 29, 2011 at 5:23 pm

      Well, the expression inside ” dont show up.

      This must be:

  2. Dorababu
    January 25, 2012 at 12:23 pm

    Hi this didn’t work for me in visual studio 2010 can you help me..

    I write as follows

    function pageLoad(sender, args) {

    if (!args.get_isPartialLoad()) {
    $addHandler(document, “keydown”, onKeyDown);



    function onKeyDown(e) {

    if (e && e.keyCode == Sys.UI.Key.esc) {




  3. January 23, 2016 at 11:43 am

    Add Behavior ID to Modelpop up extender then use this in script



  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: