javascript - 单击 标记时，如果选择"is"作为选项，则显示叠加层并遵循 的 href URL

Question

我需要在点击 anchor 标记时显示叠加层。如果从覆盖选项中选择肯定的 YES 响应，则默认 <a>标记行为应遵循 href根据需要在新窗口/当前窗口打开链接。

我的 jquery 在点击标签时显示叠加层:

$('a.external-link').click(function() {

var popupid = "popuprel";

$('#' + popupid).fadeIn();

$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;

$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});

return false;
});

是选项点击函数调用:

$('.link-continue').click(function() {                          
$('#fade , #popuprel').fadeOut()  
});

<a class = "link-continue">YES</a>

目前，在单击"is"按钮时，叠加层将关闭，但我应该如何将其重定向到作为我单击的链接的一部分存在的 URL(单击的标签的“href”属性)。

Answer 1

首先你应该保存你的<a>函数外全局变量中的url:

 var linkBuffer;

    $('a.external-link').click(function (e) {

        //prevent browser to follow link
        e.preventDefault();

        //save link
        linkBuffer = $(this).attr('href');

        var popupid = "popuprel";

        $('#' + popupid).fadeIn();

        $('body').append('<div id="fade"></div>');
        $('#fade').css({
            'filter': 'alpha(opacity=80)'
        }).fadeIn();

        var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
        var popupleftmargin = ($('#' + popupid).width() + 10) / 2;

        $('#' + popupid).css({
            'margin-top': -popuptopmargin,
            'margin-left': -popupleftmargin
        });
    });

因此，当您在弹出窗口中单击Yes 时，只需更改窗口位置即可:

$('.link-continue').click(function () {
    $('#fade , #popuprel').fadeOut();
    document.location.href = linkBuffer;
});

---

更新:

这是给你的演示: http://jsfiddle.net/zur4ik/fzn4Z/

请注意，当您在确认窗口中点击是时，JSFiddle 将不允许加载不同的链接(您可以在控制台中检查这一点，当您点击是)，但它会在 JsFiddle 中运行。