狙击手: -
// listen for clicks, opens a hyperlink attached to the event. //
$("#canvas").click(function popMessage(e) {
$("#canvas").hide();
// hyperlink opens a new window upon click on the bubble
return !window.open('About.aspx?info=' + info, "pop", "resizable,width=1000,height=600,");
});
这很好用。
但是,我正在考虑一个场景,一个人打开10个不同的弹出窗口,并混淆哪个窗口引用了哪个点击。
想到我可以,一次只允许一个弹出窗口。
第一次单击,将打开一个新的弹出窗口。 对于每次下一次点击,旧的弹出窗口将被新的点击替换。
最后当父页面关闭时,弹出窗口关闭。
我应该为这个概念寻找什么样的财产?
(需要注意的是,我的目标弹出窗口的地址不一样,每次,地址的一小部分是作为' info'传递的代码)
答案 0 :(得分:2)
每次点击#canvas时,你不想只关闭旧窗口吗?
//earlier:
var winPop = false;
// in the click event:
if (winPop) {
winPop.close();
}
winPop = window.open('About.aspx?info=' + info, "pop",
"resizable,width=1000,height=600,");
稍后关闭它:
window.onbeforeunload = function(e) {
if (winPop) {
winPop.close();
}
};
答案 1 :(得分:1)
好的,我知道你要求一个不同的答案,但也许这可能是第二种方法来解决你的问题,并试图避免“浏览器弹出窗口阻止程序”并使用户感到困惑。我的两分钱
是使用iframe弹出模式的基本示例。 http://jsfiddle.net/G8Cnh/
HTML
<div class="popup" style='display:none'>
<i>X</i>
<iframe style="width:100%; height:100%;" border="0" src="http://jsfiddle.net/"></iframe>
</div>
<a href="javascript:void(0)">open</a>
JS
$(document).on("click","a",function(){
$(".popup").fadeToggle();
});
$(document).on("click","i",function(){
$(".popup").fadeOut();
});
CSS
.popup{
width:470px;
top:50%;
margin-top:-225px;
left:50%;
margin-left:-225px;
height:54%;
background:#F60;
position:absolute;
z-index:100;
opacity:.8;
padding:10px;
}
.popup i{
position:absolute;
display:block;
background:#FFF;
border:1px solid #CCC;
padding:5px;
font-family:verdana;
font-size:10px;
left:100%;
width:15px;
hegith:15px;
border-radius:50%;
margin-left:-50px;
text-align:center;
}
.popup i:hover{
background:#F60;
color:#FFF;
cursor:pointer;
}