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>
    <style>
    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }
    </style>
</head>
<body>
    <form id="form" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript">
        function pageLoad(sender, args){
            if(!args.get_isPartialLoad()){
                //  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
                $find('mdlPopupExtender').hide();
            }
        }

        </script>
        <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
            </p>
            <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.
            </asp:Panel>
            <ajaxToolkit:ModalPopupExtender
                ID="mdlPopupExtender" runat="server"
                BackgroundCssClass="modalBackground"
                TargetControlID="btnShowModal"
                PopupControlID="pnlModalPanel"  />
        </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

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

    hi!

    To work, you have to use

    $find('').hide();
    

    instead of

    $find('mdlPopupExtender').hide();  
    
    • 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) {

    $find(‘#’).hide();

    }

    }

  3. January 23, 2016 at 11:43 am

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

    ex:

    $find(‘BehaviorID’).hide();

  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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: