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

Question

我正在使用jquery reveal插件来显示弹出窗口.我在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
});

这个插件还有其他选择吗？如果是这样,请提供给我链接.

Answer 1

根据消息来源,在两种情况下都会触发一个名为'reveal:close'的事件,你应该能够通过这个事件添加自己的处理程序

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

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

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