带有 javascript 的弹出窗口 - 在旧的弹出窗口中打开新的弹出窗口

Question

一个片段：-

     // 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'传递的代码)

Answer 1

您不想每次点击#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();
    }
};

Answer 2

好的，我知道您要求不同的答案，但也许这可以作为解决您问题的第二种方法，并尽量避免“来自浏览器的弹出窗口阻止程序”并让用户感到困惑。我的两分钱

是使用 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;
}