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,
}
}
});
});
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
}
}
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.
@moonwave99 has the correct answer for fancybox2. If you are using v1.3+ then you must use:
enableEscapeButton: false
Ref: http://fancybox.net/api
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With