检测jQuery的揭示插件模式关闭esc键或点击外部

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用jQuery的显示插件显示弹出。我正在寻找一种方式在jQuery或JavaScript中，我可以触发一个适当的事件时，通过按Esc键或点击弹出式外弹出关闭。有什么方法可以捕捉到这个事件？检测jQuery的揭示插件模式关闭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 
});

是否有这个插件的任何更多的选择？如果是这样，请为我提供链接。

回答：

按照source事件称为“透露：关闭”在这两种情况下被解雇，你应该能够通过

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

添加自己的处理程序，该事件当你需要知道以何种方式它已关闭，您可以使用'reveal：open'事件在文档对象上添加关键事件处理程序或在.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. 
    }); 
});

回答：

  1. 打开jquery.reveal.js。

  2. 添加新的选项：

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

  3. 在文件jquery.validate，找到行的内容e.which===27。

    整条生产线：

    if(e.which===27){ modal.trigger('reveal:close'); }

  4. 修改，并在此行中验证新选项escape：

    if(e.which===27 && options.escape === true){ modal.trigger('reveal:close'); }

  5. 就是这样。现在escape选项有效。

以上是 检测jQuery的揭示插件模式关闭esc键或点击外部 的全部内容， 来源链接： utcz.com/qa/260046.html

回到顶部