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