单击 <a> 标记时，显示叠加层，如果选择“是”作为选项，则跟随 <a> 的 href URL

On click of an <a> tag, show an overlay and follow the href URL of <a> if Yes is selected as an option

本文关键字：选项 href URL 跟随 显示 叠加 选择 如果 单击      更新时间：2023-09-26

我要求在单击锚标记时显示叠加层。如果从叠加选项中选择了肯定的"是"响应，则默认的<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>

目前单击"是"按钮时，覆盖层会关闭，但我应该如何将其重定向到 URL（所单击标签的"href"属性），该 URL（"href"属性）作为我单击的链接的一部分存在。

首先，您应该将<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
        });
    });

因此，当您在弹出窗口中单击"是"时，只需更改窗口位置：

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

更新：

这是您的演示： http://jsfiddle.net/zur4ik/fzn4Z/

请注意，当您在确认窗口中单击"是"时，JSFiddle 将不允许加载不同的链接（当您单击"是"时，您可以在控制台中检查这一点），但它将在 JsFiddle 中工作。

我会$('.link-continue')为样式像按钮的锚元素，它有指向建议导航的网址的链接，因此单击$('.link-continue')将用户带到同一窗口中的新页面。如果要打开新窗口，请在单击$('.link-continue')的侦听器中preventDefault，并将window.open用于相同的href。

>如果#popupre1包含<a class = "link-continue">YES</a>您可以尝试像这样更改显示覆盖函数

$('a.external-link').click(function() {
    var popupid = "popuprel";
    $('#' + popupid).fadeIn().find('.link-continue').attr('href',$(this).attr('href'));
    $('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;
});

选项点击功能未更改

而不是

document.location.href = linkBuffer;

用 

window.open(linkBuffer,'_blank');

工作谢谢。

因此，单击"继续"按钮的代码变为：

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