javascript - 无法在点击时触发 ouibounce.js 模式

Question

我正在尝试设置一个带有模态窗口的页面，该窗口在鼠标悬停在窗口上或单击链接时触发。

使用 Ouibounce 可以在退出时触发: http://carlsednaoui.github.io/ouibounce/

Ouibounce API 的文档建议我还应该能够通过单击来触发模式。

我更改了上面示例中的链接，为其指定了 #modal_button 的 id，但我无法让它触发窗口:

  // if you want to use the 'fire' or 'disable' fn,
  // you need to save OuiBounce to an object
  var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 0,
    callback: function() { console.log('ouibounce fired!'); }
  });


  $('#modal_button').on('click', function() {
    $('#ouibounce-modal').fire();
  });



  $('body').on('click', function() {
    $('#ouibounce-modal').hide();
  });


  $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
  });

  $('#ouibounce-modal .modal').on('click', function(e) {
    e.stopPropagation();
  });

我在这里设置了一个 jsfiddle 来做同样的事情。 http://jsfiddle.net/fr7k3s6f/

(由于某种原因，body 事件上的“隐藏”在 jsfiddle 中不起作用)

Answer 1

您需要使用对象 _ouibounce 来调用 fire() 函数:

_ouibounce.fire();

而不是 jQuery 对象。如果你在 jQuery.ready() 中定义它，它必须是一个全局对象，所以前面没有“var”。但我认为这是当前版本(0.0.10)中的一个错误。

我希望这会有所帮助。