To keep it simple, we will use two HTML files in this example and we’ll call them open_close_window.html and popup.html where open_close_window.html will be the parent and popup.html will be the child pop up window. open_close_window.html, the parent, will include two JS functions and a button while the child, popup.php will include nothing but a button to close itself. What I found a little odd was that in order to close the child window from within itself, I had to call a function from the parent. Here’s how it is done. Below is the full contents of both files:
myWin = window.open(“popup.html”, “myWindow”, ‘width=600,height=300’);
}//end openWin JS function
}//end closeWin JS function
<button type=”button” onclick=”openWin();”>Open Window</button>
<button type=”button” onclick=”opener.closeWin();”>Close Window</button>
I hope you can see how this all works from this simple demonstration. You don’t even need to upload the two files to a web server to test them since they are HTML files, simply place both on your desktop and open the parent, open_close_window.html from there and see how you can click the button to open the child window and then click the child’s button to close itself by calling a close function in the parent. Odd, but that’s how it’s done!