通过 esc 键或单击外部检测 jquery 显示插件模式关闭答案

【问题标题】：Detect jquery reveal plugin modal close by esc key or clicking outside通过 esc 键或单击外部检测 jquery 显示插件模式关闭
【发布时间】：2013-07-07 19:53:30
【问题描述】：

我正在使用 jquery 显示插件来显示弹出窗口。我正在寻找一种在 jquery 或 javascript 中的方法，当该弹出窗口通过按 esc 键或单击弹出窗口外部关闭时，我可以触发适当的事件。有什么方法可以捕捉到这个事件吗？

并且在显示插件网站上只给出了几个选项，例如：

$('#myModal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
});

这个插件还有更多选择吗？如果是这样，请提供我的链接。

【问题讨论】：

标签： javascript jquery reveal.js

【解决方案1】：

根据source，在这两种情况下都会触发一个名为“reveal:close”的事件，您应该能够通过

为该事件添加自己的处理程序

$yourModal.bind('reveal:close', function () {
  console.log('Modal closed');
});

当您需要知道它以哪种方式关闭时，您可以使用 'reveal:open' 事件在文档对象上添加 keyup 事件处理程序或在 .reveal-modal-bg 元素上添加单击事件处理程序.

$yourModal.bind('reval:open', function () {
  var $document = $(document);
  $document.bind('keyup', function onEscHandler( event ) {
    if (event.which === 27) {
      console.log('closed by ESC');

      // Modal is closed, let's remove the handler again
      $document.unbind('keyup', onEscHandler);
    }
  });


  var $modal_bg = $('.reveal-modal-bg');
  $modal_bg.one('click', function onBgClidkHandler() {
    console.log('closed by click on BG');
    // We don't need to remove this handler since 'one' does it automatically.
  });
});

【讨论】：

【解决方案2】：

打开jquery.reveal.js。
添加新选项：

var defaults = { animation: 'fadeAndPop', animationspeed: 300, closeonbackgroundclick: true, dismissmodalclass: 'close-reveal-modal' escape: true // true: modal close with Esc. false: modal no close with Esc };
在文件jquery.validate中，找到包含e.which===27的行。

完整的行是：

if(e.which===27){ modal.trigger('reveal:close'); }
修改并验证此行中的新选项escape：

if(e.which===27 && options.escape === true){ modal.trigger('reveal:close'); }
就是这样。现在escape 选项起作用了。

【讨论】：