如何在关闭 fancybox 时停止页面重定向？

Question

我有以下代码

<script type="text/javascript">
        jQuery(document).ready(function() {
            beginCartnotification();
        });
        setTimeout(function () {
            window.location.href = "http://www.someurl.com";
        }, 5000);
    </script>


<script type="text/javascript">
        jQuery.fancybox({
            'width': '300',
            'height': '90',
            'padding': '40px',
            'autoDimensions': false,
            'border': '1px solid #005195',
            'autoScale': false,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'showCloseButton': true,
            'type': 'inline',
            'href': '#cartnotification-popup',
            'onClosed': function(){ //perform some task on closing the fancybox.}
        });
    }
</script>

现在我想做的是，如果用户点击花式框上的关闭按钮，页面不应重定向。

如果用户在 5 秒后没有点击关闭按钮，用户应该被重定向到另一个页面。

如何在onClosed函数中实现？

http://fancybox.net/api

Answer 1

只需要在fancybox的onComplete属性中添加一个setTimout，一旦显示内容就会被调用。如果在关闭 fancybox 之前超时，请执行重定向。

在 onClose 属性 函数中清除超时，以确保不会触发 window.loaction 更改。

还将 fancybox 设置添加到 jQuery 的 .ready() 方法中，以确保在文档准备好后立即进行初始化。

<script type="text/javascript">
jQuery(document).ready(function() {

  beginCartnotification();

  // ADD A VAR TO HOLD YOUR TIMER.
  var timer;

  jQuery.fancybox({
    'width': '300',
    'height': '90',
    'padding': '40px',
    'autoDimensions': false,
    'border': '1px solid #005195',
    'autoScale': false,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'showCloseButton': true,
    'type': 'inline',
    'href': '#cartnotification-popup',
    'onComplete': function() {
      timer = setTimeout(function () {
        // REDIRECTING TAKES PLACE AFTER 5 SEC.
        window.location.href = "http://www.someurl.com";
      }, 5000);
    },
    'onClosed': function() {
      // CLEAR THE TIMEOUT !!!
      clearTimeout(timer);
    }
  });

});
</script>