I am using fancybox on a page, but I'm using it as more of a design feature than a jQuery modal. I am trying to stop the user from being able to close it (as it will "break" the design of the page). I have managed to stop the user from clicking off fancybox, but I am having trouble stopping it close when the Esc key is pressed. I have tried 'closeOnEscape': false but this doesn't seem to work. Below is my code. Any suggestions as to what I am doing wrong or what I need to do?

$(document).ready(function () {
    $.fancybox({
        'width': '340px',
        'height': '100%',
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',
        'href': 'form.php',
        'hideOnContentClick': false,
        'closeBtn' : false,
        'helpers' : { 
            'overlay' : {
                'closeClick': false,
            }
        }
    });
});

I am using fancybox on a page, but I'm using it as more of a design feature than a jQuery modal. I am trying to stop the user from being able to close it (as it will "break" the design of the page). I have managed to stop the user from clicking off fancybox, but I am having trouble stopping it close when the Esc key is pressed. I have tried 'closeOnEscape': false but this doesn't seem to work. Below is my code. Any suggestions as to what I am doing wrong or what I need to do?

$(document).ready(function () {
    $.fancybox({
        'width': '340px',
        'height': '100%',
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',
        'href': 'form.php',
        'hideOnContentClick': false,
        'closeBtn' : false,
        'helpers' : { 
            'overlay' : {
                'closeClick': false,
            }
        }
    });
});

• javascript
• jquery
• fancybox

• 1 what version of fancybox are you using? – Stuart Burrows Commented Jan 4, 2013 at 13:42
• This will not help you but if you're using it as a design feature it's probably easier just to build something similar (visually) – Damien Commented Jan 4, 2013 at 13:43
• stackoverflow.com/questions/3000884/… – Arpit Commented Jan 4, 2013 at 13:44
• 1 The API option modal: If set to true, will disable navigation and closing. – JFK Commented Jan 4, 2013 at 18:03

3 Answers 3

Check the keys option from fancyBox docs:

keys
Define keyboard keys for gallery navigation, closing and slideshow
Object; Default value:

{
    next : {
        13 : 'left', // enter
        34 : 'up',   // page down
        39 : 'left', // right arrow
        40 : 'up'    // down arrow
    },
    prev : {
        8  : 'right',  // backspace
        33 : 'down',   // page up
        37 : 'right',  // left arrow
        38 : 'down'    // up arrow
    },
    close  : [27], // escape key
    play   : [32], // space - start/stop slideshow
    toggle : [70]  // letter "f" - toggle fullscreen
}

Just map the close value to null.

If you are using fancyBox2, add this property to your code:

$.fancybox({
  // all your other options here
  ...,
  keys : {
    close  : null
  }
}

@moonwave99 has the correct answer for fancybox2. If you are using v1.3+ then you must use:

enableEscapeButton: false

Ref: http://fancybox.net/api

As others have mentioned in comments, modal: true works perfectly...

$.fancybox({
    modal: true
});

From the docs...

modal - If set to true, will disable navigation and closing.