使用javascript的弹出窗口 - 在旧的弹出窗口中打开新的弹出窗口

时间:2013-06-10 22:33:00

标签: javascript popup

狙击手: -

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

2 个答案:

答案 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;
}