Creating a javascript pop up window from flash. |
Click the button in the flash movie to see the effect.
The code... In this page between the <head> and </head> tags
  <script language="javascript">
<!--
function openNewWindow(url, name, config) {
    newWindow = window.open(url, name, config);
}
//-->
</script>
and in the flash movie there is a button with the actionscript...
on (release) {
    getURL("javascript:openNewWindow('popup.html','myPopUpWindow',config='width=300,height=400');");
}
click here to download the .fla (26kb)
There are other parameters that can be controlled by this script not just width and height, here is a quick summary of some of them.
  toolbar
menubar
scrollbars
resizable
location
directories
status
fullscreen
All these properties can be set at either 0 or 1 for example status=0 would cause the window not to have status bar at the bottom and fullscreen=1 would make the window appear fullscreen (if you do this be very careful to include a close window button in the page that appears in the pop up)
  left
screenX
top
screenY
Are the properties that control the position on the screen the window appears at (in pixels), to be compatable in netscape and internet explorer you need to use all 4 of them. So for example left=50,screenX=50,top=25,screenY=25 would make the window appear 50 pixels from the left of the screen and 25 pixels from the top.
So to make a pop up window with a status bar but no other window decorations, have it be 300 pixels wide by 250 high and appear at the top left corner of the screen you would use the following (without any line breaks)
getURL("javascript:openNewWindow('popup.html','myPopUpWindow',config='left=0,screenX=0,top=0,screenY=0,
width=300,height=250,status=1,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,directories=0,
fullscreen=0');");
It is also possible for us to gather information about the users screen size and position the pop window accordingly, for example we may wish to centre the window on the screen. To do this we'll write another function openCentredWindow, This function will take 4 parameters the url and window name as with openNewWindow, but instead of config here we will pass 2 different parameters width and height. Of the window decorations I've only adjusted the status bar, but the others could be added to the configString variable if you wish. Click here to see it in action.
  <script language="javascript">
<!--
function openCentredWindow(url, name, width, height) {
    var configString = 'width=' + width + ',height=' + height + ',status=1';
    newWindow = window.open(url, name, config=configString);
    if (parseInt(navigator.appVersion) >= 4) {
        var screenWidth = screen.width;
        var screenHeight = screen.height;
        var x = (screenWidth - width) / 2;
        var y = (screenHeight - height) / 2;
        newWindow.moveTo(x,y);
    }
}
//-->
</script>
and to make a button in flash that creates this window use the following actionscript...
on (release) {
    getURL("javascript:openCentredWindow('popup.html','myCentredWindow',500,400);");
}
One last thing to mention about creating pop up windows. If you have a window open with the name window1 and then try to open another window also with the name window1 the content for your second window will replace that of the first. To create separate windows they each need different names.
To make a close window button is more straight froward, use the following actionscript attached to a button.
  on (release) {
    getURL("javascript:self.close();");
}
Or if the page containing the button is within a frameset use,
  on (release) {
    getURL("javascript:parent.close();");
}
Using calling javascript functions in this way isn't restricted to flash, for example you cold make a link to close you pop up window in html like this
  <a href="javascript:self.close();">click here to close</a>
Any questions? Please email me at catbert303@yahoo.com