Question

在我的网站上，几秒钟后会出现一个精美的弹出框，询问用户是否要注册时事通讯。这很好。

但是，我还想在页面上打开一个链接，打开简报框。我试过了Click <a href="#newsletterpopup">here</a> to open the popup。没有成功。

非常感谢你的帮助

JS：

function openFancybox() {
    setTimeout(function () {
        $.fancybox('#newsletterpopup', {
            closeClick: false, // this prevents fancybox to close unless close unless ".non-merci" is clicked
            showCloseButton: true,
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(58, 42, 45, 0.3)'
                    }
                }
            },
            afterShow: function () {
                // enables a way to close fancybox
                $(".non-merci").on("click", function () {
                    $.fancybox.close()
                });
            }
        });
    }, 7000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.04
    });
});

可能导致与点击功能冲突的非相关脚本：

//==============
//! Smooth scrolling / click potentially conflicting with other scripts
//==============

$(document).ready(function(e) {
$('a[href*=#]:not([href=#])').click(function (ev) { // Added 'ev' parameter
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            ev.preventDefault(); // We're animating this, so don't let the browser try to navigate to this URL
            $('html,body').animate({
                scrollTop: target.offset().top - 100
            }, 'normal');
        }
    }
});


window.onscroll = scrollFunction;
function scrollFunction() {
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    if (top > 200) {
        $('.back-to-top').fadeIn();
    }
    else {
        $('.back-to-top').fadeOut();
    }
}
});

Answer 1

您需要稍微修改一下脚本：

首先，您需要为链接添加选择器

<a class="fancybox" href="#newsletterpopup">here</a>

...因此您可以将该选择器绑定到常规的fancybox初始化，如

$(".fancybox").fancybox({
    // options
});

其次，您的openFancybox()函数无法以编程方式打开fancybox，但会在已初始化的fancybox选择器上触发click事件，如

function openFancybox() {
    setTimeout(function () {
        $(".fancybox").trigger("click");
    }, 7000);
};

通过这种方式，您可以满足您的所有需求：几秒钟之后启动火焰盒并拥有手动打开时事通讯的链接

编辑：修正了jsfiddle中的错误

查看更新的 JSFIDDLE

Answer 2

我将fancybox声明放在一个单独的函数中，因此可以在计时器和click事件中调用它。

小提琴：http://jsfiddle.net/PQqGC/3/

第3行和第46行调用您的fancybox代码。

**由于未加载库，我必须注释掉您的cookie代码。

通过常规文本链接打开fancybox

2 个答案: