how to hide modal popup box by escape key in content page

Question

I would like to hide modal popup box by pressing escape key. I have found a way that works in pages containing body tag(not content pages); using the function below, and onkeypress event for body tag.

    function catchEsc(e) {
            var kC = (window.event) ?    // MSIE or Firefox?
                 event.keyCode : e.keyCode;
            var Esc = (window.event) ?
                27 : e.DOM_VK_ESCAPE // MSIE : Firefox
            if (kC == Esc) {
                var mpu = $find('ModalPopupExtender1');
                mpu.hide();
            }
        }

the problem is I am using a content page and I don't know without having the body tag, how can I do this. any ideas?

Answer 1

I solved the problem myself as below:

• In master page, I made the body tag a server control(id="myBody" runat="server").

• In content page(aspx),

  • I set modal popup's ClientIDMode to static,
  • I added the javascript function catchEsc(e):

    function catchEsc(e) {
            var kC = (window.event) ?    // MSIE or Firefox?
                 event.keyCode : e.keyCode;
            var Esc = (window.event) ?
                27 : e.DOM_VK_ESCAPE // MSIE : Firefox
            if (kC == Esc) {
                var mpu = $find('ModalPopupExtender1');
                mpu.hide();
            }
        }

• finally in content page's code behind, I added the code bellow to page_Load:

    HtmlGenericControl body = 
              (HtmlGenericControl)this.Page.Master.FindControl("myBody");
    body.Attributes.Add("onkeypress", "catchEsc(event)");

and it worked!

Answer 2

this code will work in content placeholder also and no need to add handler in behind code

    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) {
            $find('popPAlert').hide();
            $find('ModalPopupThemeView').hide();
            $find('AlPopUp').hide();
            $find('Mod_Error').hide();
            $find('Mod_preview').hide();
        }
    }
</script>