Menu
This is a JavaScript question.
I need to create a button which, when clicked once, will open up 5 sub-windows (popup boxes).
One box will be in the top left corner of the screen, one in the top right corner, one in the lower left corner, one in the lower right corner, and one in the center. Each box will have a different URL.
When the main window is closed, all of the sub-windows should also close.
I have only been able to do the code that opens one popup - cannot figure out how to code all 5 to open at once with one button click and then close them all when the parent window closes.
Here is what I have so far:
<SCRIPT language="JavaScript">
function myPopup(URL) {
popupWindow = window.open(URL,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</SCRIPT>
<a href="#" onclick="myPopup(this.href);return false">Open Pop-Up</a>
Many thanks to anyone who can help me out.
Thanks to everyone who is helping me. By utilizing the feedback here, I have worked on this project all day and have come up with some code that works. I was not sure how to assign urls for each popup to the array - but at least they work.
However, I can not get all the popups to close when the parent window closes. Hope you can help. Here is the new code:
<script type="text/javascript">
/*Use Array - Open 5 new popup windows using onclick*/
function newWindow() {
var winPop = new Array();
winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}
/*NOT WORKING FOR ME --Close all popups when parent window is closed*/
onbeforeunload = function() {
for (var index = 0; index < winPop.length; ++index)
winPop[index].close();
}
</script>
</head>
<body>
<div id="wrap"> <a href='' onclick='newWindow()'><img src='images/group_clicker.gif' border='0'></a> </div>
</body>
687
asked Jun 06 '26 07:06
DEMO
Save all opened windows to an array.
Register for the beforeUnload event, and when it fires, loop through the popups close()'ing them.
NB: I think it's jsFiddle or Chrome, but it won't open more than 1 popup per click.
And due to restrictions placed on popup opening you cannot reliably control the position of opened popups. It may be useful for you to open in-window popups like YUI's panel or jQuery(UI)'s dialogue
function openPopup(howMany) {
var popups = [];
var temp;
for (var index = 0; index < howMany; ++index) {
popups.push(open('', '', 'height=500,width=500'));
popups[index].document.write('popup ' + (index + 1) + ' of ' + howMany + '<br/>this will close on parent window close');
}
closeFunc = function() {
for (var index = 0; index < popups.length; ++index)
popups[index].close();
};
if (addEventListener)
addEventListener('beforeunload', closeFunc, false);
else
attachEvent('onbeforeunload', closeFunc);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
