Pop up windows with Javascript





Ever wondered how those pop windows were created ? Well here I will explain how.

The way I have implemented is by using Javascript to open a new window and write the relevant HTML code to it. I have an "include type state in the start of the page that inserts the common Javascript code into the page and then the actual code that calls the Javascript function.

<Script language = "JavaScript"> <!--
document.write("<SCRIPT SRC=\"/windows.js\"><\/SCRIPT>");}

The file windows.js contains the code needed to open the new window and give it it's HTML format. Below I have included an extract. What I did was create the page in a HTML editor and then added the Javascript function to write it out to the new window.

The actual file has two functions. One for displaying an image in portrait mode and the other in landscape mode.

// Two functions, one to show the picture in Portrait (v) and the
// other in Landscape (h)
function Showpich(Whatpic) {
myWin= open("", "displayWindow","toolbar=0,menubar=0,location=0,directories=0,status=0,
scrollbars=0,resizable=0,copyhistory=0,width=640,height=450"); // open document for further output

// create document
myWin.document.write('</head><body bgcolor="#000000" text="#FFFFFF" >');
myWin.document.write('<p align="center">');
myWin.document.write('</p><div align="center"><table border="0" width="100%"><tr>');
myWin.document.write('<td width="100%" valign="middle" align="center"><img border="0" src=');
myWin.document.write(Whatpic +' ></td></tr></table></center></div>');
myWin.document.write('<p align="center"><font face="verdana" size="1">© 2000 ');
myWin.document.write('<a href="http://www.manuelnegri.com">Manuel Negri</a> All Rights Reserved.</font>');

// close the document - (not the window!)

The variable Whatpic is what is passed from the calling Javascript code. It contains the reference to the HTML image that we want to display. I have displayed what the variable is below. To call the function insert the Javascript function call as demonstrated. And that is it.

<a href="javascript:Showpicv('../images/sila_cD01.jpg');"><img border="0" src="../thumb/sila_cD01.jpg" width="53" height="80" alt="Click to enlarge"></a>