Question

我在页面上使用fancybox，但我将它用作设计功能而不是jQuery模式。我试图阻止用户关闭它（因为它将“打破”页面的设计）。我设法阻止用户点击fancybox，但是当按下Esc键时我无法将其关闭。我试过'closeOnEscape': false，但这似乎不起作用。以下是我的代码。关于我做错了什么或我需要做什么的任何建议？

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

Answer 1

检查fancyBox docs中的keys选项：

<强>键
为图库导航，关闭和幻灯片定义键盘键宾语;默认值：

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

只需将close值映射到null。

如果您使用的是fancyBox2，请将此属性添加到您的代码中：

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

Answer 2

@ moonwave99有fancybox2的正确答案。如果您使用的是v1.3 +，则必须使用：

enableEscapeButton: false

参考：http://fancybox.net/api

Answer 3

正如其他人在评论中提到的那样，modal: true完美地运作......

$.fancybox({
    modal: true
});

来自the docs...

模态 - 如果设置为true，则会禁用导航和关闭。

当用户按下Esc时停止关闭fancybox

3 个答案: