I'm trying to build a popup that can be closed from anywhere.
On the Mainpage you have the option to open it. At any point while browsing the mainpage the user shall be able to close it again.
I found this basic pop-control:
function popuponclick()
{
my_window = window.open("", "mywindow","status=1,width=350,height=150");
}
function closepopup()
{
my_window.close ();
}
The problem, as soon you leave the page from where you opened the popup, the function looses its connection and the popup won't close anymore.
Is there a way to adress and close this certain popup pagewide?
I'm trying to build a popup that can be closed from anywhere.
On the Mainpage you have the option to open it. At any point while browsing the mainpage the user shall be able to close it again.
I found this basic pop-control:
function popuponclick()
{
my_window = window.open("", "mywindow","status=1,width=350,height=150");
}
function closepopup()
{
my_window.close ();
}
The problem, as soon you leave the page from where you opened the popup, the function looses its connection and the popup won't close anymore.
Is there a way to adress and close this certain popup pagewide?
Share Improve this question asked May 13, 2013 at 15:02 KreativrandaleKreativrandale 851 gold badge1 silver badge10 bronze badges 9- doesn't this window have a close button already? – Huangism Commented May 13, 2013 at 15:03
- I don't want the user to bother with the popup-itself. It is just a workaround for some other problem. Further it is supposed to close itself per unload() at closing the main-page. – Kreativrandale Commented May 13, 2013 at 15:09
- If it is supposed to close itself on page unload, then why do you need another page to close it? – Derek Henderson Commented May 13, 2013 at 15:12
- What the OP wants I think is a way to close popup from page B if it was opened from page A. Page A and B are pages on the same site. I have a suspicion though that due to security your not allowed to re-ontain a reference to a pop-up from Page B, that was opened from Page A (after the user navigates from A to B). This is why I propose the parent frame solution. – Menelaos Commented May 13, 2013 at 15:34
-
@meewoK, in a previous ment the OP wrote, "Further it is supposed to close itself per unload() at closing the main-page." This would suggest he doesn't need page B to close anything, just needs an
unloadhandler. – Derek Henderson Commented May 13, 2013 at 15:46
3 Answers
Reset to default 3There are three solutions I propose depending on what the problem actually is.
1) closepopup() does not work on other pages
If you need to close the popup from page B when it was opened from page A the following code will allow you to obtain a reference to the popup from page B and close it. Reference: Find window previously opened by window.open
PageA.html
<script>
function popuponclick()
{
my_window = window.open("http://google.", "mywindow","status=1,width=350,height=150");
}
function closepopup()
{
my_window.close ();
}
</script>
<a href="javascript:popuponclick()">Open window...</a></br>
<a href="PageB.html">Go to Page B</a>
</body>
</html>
PageB.html
<html>
<body>
<script>
function closepopup()
{
var popupPlayer= window.open('', 'mywindow', 'status=1,width=350,height=150') ;
popupPlayer.focus();
popupPlayer.close();
}
</script>
<a href="javascript:closepopup()">Close window...</a></br>
</body>
</html>
2) closepopup() does not work on the same page as window is opened
A global reference to my_window is needed so you would need to change the code like this:
var my_window; //global reference here
function popuponclick()
{
my_window = window.open("", "mywindow","status=1,width=350,height=150");
}
function closepopup()
{
my_window.close ();
}
3) Final third solution using frames
You separate your page into 1 frames (one which is 100%) and another that is 0%.
You add the window open/close code in the parent frame. Than you call the window control code via cross frame javascript mands.
Frames HTML Containing Javascript
<html>
<head>
<title>My example</title>
<script>
var my_window;
function popuponclick()
{
my_window = window.open("", "mywindow","status=1,width=350,height=150");
}
function closepopup()
{
my_window.close ();
}
</script>
</head>
<frameset cols="100%,0%">
<frame src="frame.html"/>
<frame/>
</frameset>
</html>
Internal Frame (frame.html) - calling parent Javascript
<html>
<body>
<a href="javascript:parent.popuponclick()"> Open Window </a><br/>
<a href="javascript:parent.closepopup()"> Close Window </a><br/>
<a href="javascript:location.href=location.href"> Refresh Frame (and try again)</a><br/>
</body>
</html>
If you are trying to close it from an iframe...
top.my_window.close();
I believe you need to go out a level since that variable is set on the parent window. Not in the iframe.
If you just need the popup to be closed automatically when you leave the main page (as suggested in a ment), you just need to do the following:
$(window).unload(closepopup);