CODEWITHSUNDEEP
javascriptjqueryfancybox
Jake Neal
Jake Neal

Reputation: 187

Stop fancybox closing when user presses Esc

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,
            }
        }
    });
});

Upvotes: 10

Views: 12160

Answers (3)

Lindsey D
Lindsey D

Reputation: 2857

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.

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

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
  }
}

Upvotes: 16

Stuart Burrows
Stuart Burrows

Reputation: 10814

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

enableEscapeButton: false

Ref: http://fancybox.net/api

Upvotes: 2

Related Questions