單擊<a>標簽時，顯示一個覆蓋並遵循href URL（</a> <a>如果選擇了“是”作為選項）</a>

Question

我需要在點擊錨標記時顯示覆蓋圖。 如果從覆蓋選項中選擇了肯定的YES響應，則默認的<a>標記行為應跟在href鏈接之后，並根據需要在新窗口/當前窗口中打開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（單擊的鏈接的一部分）中出現的URL（單擊的標記的“ href”屬性）。

Answer 1

首先，您應將<a>網址保存在函數之外的全局變量中：

 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中起作用。

Answer 2

我將$('.link-continue')作為樣式類似於按鈕的錨元素，該元素具有到建議導航的URL的鏈接，因此單擊$('.link-continue')會將用戶帶到同一窗口中的新頁面。 如果要打開新窗口，請在$('.link-continue')單擊偵聽器中使用preventDefault ，並將window.open用於相同的href 。

Answer 3

如果#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;
});

選項單擊功能未更改

Answer 4

代替

document.location.href = linkBuffer;

運用

window.open(linkBuffer,'_blank');

工作謝謝。

因此，繼續按鈕單擊的代碼變為：

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