Javascript JS确认按钮链接加载后弹出窗口
我已经创建了一个链接,它有两个用途:(1)通过打开一个新选项卡(2)将用户指向外部链接,以确认他们在该外部链接中执行了特定操作,并在确认后通知管理员 我希望发生以下顺序:Javascript JS确认按钮链接加载后弹出窗口,javascript,jquery,html,Javascript,Jquery,Html,我已经创建了一个链接,它有两个用途:(1)通过打开一个新选项卡(2)将用户指向外部链接,以确认他们在该外部链接中执行了特定操作,并在确认后通知管理员 我希望发生以下顺序: 用户点击链接并被指向外部链接(即www.google.com),同时确认消息会在原始页面中弹出 用户执行操作(或不执行) 用户返回到原始页面,看到一个确认弹出窗口,上面写着“请确认您执行了该操作” 如果用户单击“确定”,则会调用/dashboard/notify/admin/,并通知管理员已执行该操作(此操作正常) 目前,我只
$(文档).ready(函数(){
$('.goal completed')。单击(函数(){
var ss=确认(“请确认您执行了该操作”);
if(ss){
变量id,数据,url='/dashboard/notify/admin/'
id=$(this.attr('task-id');
数据={id:id};
$.post(url、数据、函数(r){
如果(r.response=='OK'){
提醒('我们将确认并给您赢得的分数!');
}
});
}
})
});代码>
链接和电子邮件测试
您可以执行以下操作:
用户点击按钮
新窗口将与其他URL一起打开
弹出窗口打开,用户可以确认。此弹出窗口的外观在不同的浏览器中会有所不同。例如,在Safari中,直到用户返回到原始窗口/选项卡,弹出窗口才会出现,但在Chrome中,它会立即出现
您可以在此处测试此代码段:因为StackOverflow代码段似乎阻止了警报和url更改的演示。
函数loadAlert(){
窗口打开(“http://www.google.com“,”空白“);
var ss=确认(“请确认您执行了该操作”);
if(ss){
变量id,数据,url='/dashboard/notify/admin/'
id=$(this.attr('task-id');
数据={
id:id
};
$.post(url、数据、函数(r){
如果(r.response=='OK'){
提醒('我们将确认并给您赢得的分数!');
}
});
}
}
链接和电子邮件测试
我想提供最终解决方案的更新。最后,我使用HTML创建了一个隐藏模式的弹出窗口,并在单击链接按钮时删除了隐藏的类。现在一切都按需要运转
$(文档).ready(函数(){
$('.goal completed')。单击(函数(){
变量id,数据,url='/dashboard/notify/admin/'
id=$(this.attr('task-id');
数据={
id:id
};
$.post(url、数据、函数(r){
如果(r.response=='OK'){
提醒('我们将确认并给您赢得的分数!');
}
});
})
$('.goal pop')。单击(函数(事件){
$(“#model”).removeClass('hidden');
$(“#目标确认”).removeClass('hidden');
$(“#关闭”).removeClass('hidden');
$(“#覆盖”).removeClass('hidden');
});
});代码>
#覆盖{
位置:固定;
排名:0;
左:0;
宽度:100%;
身高:100%;
背景:#000;
不透明度:0.5;
}
#模态{
背景:rgba(0,0,0,0.2);
边界半径:14px;
填充:8px;
位置:固定;
最高:50%;
左:50%;
利润上限:-50px;
左边距:-100px;
}
#进球确认{
边界半径:8px;
背景:#fff;
填充:20px;
}
#接近{
位置:绝对位置;
宽度:24px;
高度:27px;
显示:块;
顶部:9px;
右:-1px;
}
.隐藏{
显示:无;
}
.btn yesno{
位置:相对位置;
浮动:左;
宽度:45%;
填充物:5px;
边缘顶部:5px;
边缘底部:12px;
左缘:2%;
保证金权利:2%;
文本对齐:居中;
字体大小:16px;
边框:1px实心;
边框颜色:rgba(136,136,136,0.2);
空白:nowrap;
溢出:隐藏;
文本溢出:省略号;
}
.btn目标{
位置:相对位置;
浮动:左;
宽度:85%;
填充:10px;
边缘底部:12px;
保证金权利:1%;
文本对齐:居中;
字体大小:16px;
边框:1px实心;
边框颜色:rgba(136,136,136,0.2);
空白:nowrap;
溢出:隐藏;
文本溢出:省略号;
}
.btn行动{
颜色:#fff;
背景色:#F5A623;
你完成任务了吗?
{%endblock%}{%block javascript%}
{%endblock%}
您无法将用户重定向出您的网站,并期望当他们返回时,单击
事件将从他们离开的点继续。这样做不起作用。我正在另一个选项卡中打开新链接,因此我的网站仍在同一页上。弹出窗口不能在通知管理员之前弹出确认窗口吗允许链接在用户回答弹出窗口之前打开新选项卡?尝试使用setTimeout(function(){var ss=confirm('Please confirm your performed the action');…},100)包装click函数中的所有代码
谢谢,这非常接近。唯一的问题是,虽然我最初被引导到外部链接,但当弹出窗口在100毫秒后出现时,我被迫返回到Chrome上的原始选项卡。有没有办法让弹出窗口在不强迫用户返回网站的情况下直接出现?您缺少了}
在报告末尾function@AlonEitan谢谢你让我知道。我已经用修改后的synta更新了答案