3

I am using JqModal in my project. Its a nice JS modal. However i need one help to attach an Close On Escape key press to the JqModal. I am loading eternal content from external URL in JqModal.

For simple Modal where no IFrame is used, its very easy to implement the CloseOnEscape key press feature.

skaffman
  • 398,947
  • 96
  • 818
  • 769
user1233802
  • 573
  • 1
  • 5
  • 21

3 Answers3

5

I made it work by updating the jqModal.js file

Steps:

  1. Add option "closeOnEsc: true" to the jqModal. So the option will look something like this,

        var p = {
    overlay: 50,
    overlayClass: 'jqmOverlay',
    closeClass: 'jqmClose',
    trigger: '.jqModal',
    ajax: F,
    ajaxText: '',
    target: F,
    modal: F,
    toTop: F,
    onShow: F,
    onHide: F,
    onLoad: F,
    closeOnEsc: true
};

  2. Add following code to the jqModal open function.

        var modal = $(h.w);

    modal.unbind("keydown");

    if (c.closeOnEsc) {
        modal.attr("tabindex", 0);
        modal.bind("keydown", function (event) {
            if (event.keyCode == 27) {
                event.preventDefault();                        
                modal.jqmHide();
            }
        });
        modal.focus();
    }
user1233802
  • 573
  • 1
  • 5
  • 21
2

From http://forum.jquery.com/topic/jquery-jqmodal-and-the-esc-key

document.onkeydown = function(e){
    if (e == null) { // ie
       keycode = event.keyCode;
    } else { // mozilla
       keycode = e.which;
    }
    if(keycode == 27){ // escape, close box
       $('.jqmWindow').jqmHide();
     }
};

Where '.jqmQWindow' is the window or container you attached jqModal to.

dinie
  • 536
  • 1
  • 4
  • 12
0

I updated user1233802's answer for the latest version of jqModal (as of 2/21/2014):

http://pastebin.com/7RQG1Jj3

Harry
  • 3,116
  • 2
  • 23
  • 20