Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,
            }
        }
    });
});
like image 632
Jake Neal Avatar asked Jan 04 '13 13:01

Jake Neal


3 Answers

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
  }
}
like image 148
moonwave99 Avatar answered Nov 20 '22 02:11

moonwave99


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.

like image 21
Lindsey D Avatar answered Nov 20 '22 04:11

Lindsey D


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

enableEscapeButton: false

Ref: http://fancybox.net/api

like image 2
Stuart Burrows Avatar answered Nov 20 '22 03:11

Stuart Burrows