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' )

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' )

• javascript
• popup

Share Improve this question Follow edited Jun 10, 2013 at 23:00 Philo asked Jun 10, 2013 at 22:33 PhiloPhilo 1,9891212 gold badges4040 silver badges8080 bronze badges 2

• Why are you hiding #canvas? If it is hidden they won't be able to click it again!? – Andy G Commented Jun 10, 2013 at 22:51
• its a canvas on a canvas. haha. so the original underlying image is still there. a dream within a dream. blah – Philo Commented Jun 10, 2013 at 22:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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();
    }
};

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/G8Cnh/

HTML

<div class="popup" style='display:none'>
    <i>X</i>
    <iframe style="width:100%; height:100%;" border="0" src="http://jsfiddle/"></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;
}