Popup Window with javascript - open new popup in the old popup window

1
votes

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

2
javascriptpopup
Why are you hiding #canvas? If it is hidden they won't be able to click it again!? – Andy G
its a canvas on a canvas. haha. so the original underlying image is still there. a dream within a dream. blah – Philo

2 Answers

2
votes

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

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