单击<a>标签时，显示一个覆盖并遵循href URL（</a> <a>如果选择了“是”作为选项）</a>

Question

I have a requirement to show an overlay on click of a anchor tag. If affirmative YES response is selected from the overlay options, the default <a> tag behaviour should follow with the href link opening in new window/current window as required.

My jquery to show an overlay on click of tag:

$('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;
});

Yes option click function call:

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

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

Currently on click of the YES button the overlay closes but how should i redirect it to the URL('href' attribute of the tag clicked) which is present as the part of the link i clicked.

Answer 1

First you should save your <a> url in global variable out of the function:

 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
        });
    });

So when you click Yes on your popup, then just change window location:

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

---

Update:

Here is demo for you: http://jsfiddle.net/zur4ik/fzn4Z/

Please note , that when you'll click yes on confirmation window, JSFiddle will not allow to load different link (you can check this in console, when you click Yes ), but it will work out of JsFiddle.

Answer 2

I would have $('.link-continue') as an anchor element styled like button, which has link to the url proposed to navigate, so clicking on $('.link-continue') take user to new page in same window. In case you want to open new window, preventDefault in click listener of $('.link-continue') , and use window.open for same href .

Answer 3

if #popupre1 contains <a class = "link-continue">YES</a> you can try change your Show overlay function like this

$('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;
});

option click function not changed

Answer 4

Instead of

document.location.href = linkBuffer;

using

window.open(linkBuffer,'_blank');

worked Thanks.

So the code for Continue button click becomes:

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