Search code examples
escapingmaster-pagesmodalpopupextendercontent-pages

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


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?


Solution

  • 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!