Home > AJAX > Hide AJAX Modal Popup with Esc Press

Hide AJAX Modal Popup with Esc Press


Hi

try this example to hide AJAX Modal Popup Extender when user press 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="frm" 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 hidden by pressing the escape key
            </p>
            <asp:Button ID="btnShowModal" runat="server" Text="Click to Show the Page Modal" />
            <asp:Panel ID="pnlModalPanel" runat="server" Style="display: none">
                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
Categories: AJAX
  1. No comments yet.
  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: