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

Question

A snipet:-

     // 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,");
                 });

This works good.

However, I am thinking of a scenario, where a person opens 10 different pop up windows and gets confused which window was referencing to which click.

Came to mind that I could, only allow one pop up window at a time.

for the first click, a new popup window opens. for every next click, the old popup window is replaced by the new click.

finally when parent page is closed, popup window is closed.

What kind of property should I be looking at for this concept?

( to be noted that the address of my target popup is not the same, every time, a small part of the address is a code passed as the 'info' )

Answer 1

Don't you just want to close the old window each time #canvas is clicked?

//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,");

And to close it later:

window.onbeforeunload = function(e) {
    if (winPop) {
        winPop.close();
    }
};

Answer 2

Ok I know you request a different answer but maybe this can be a second approach for solve your problem and also try to avoid the "pop up blocker from the browsers" and confuse the user. My two cents

Is a basic example to make a modal pop up using an 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;
}