MODAL POP-UP
showModalDialog Method
Creates a modal dialog box that displays the specified HTML document.
Only Internet Explorer supports this method
Syntax
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
Return Value
Returns the window of the document specified in sURL
The syntax of showModelessDialog() is identical
<![CDATA[
THE CODE
-----------------
function newview1()
{
image1 = document.img1.src;
window.showModalDialog(image1,"","dialogWidth:560px;
dialogHeight:440px; resize:yes;
status:yes; center:yes; dialogTop:100px;
dialogLeft:100px; help:no; minimize:no;
maximize:yes; border:thin; statusbar:yes;")
}
. . .
<img src="../images/Dragon00.jpg" width=100px align=left border="3px"
style="margin:10px;" alt="click to view full image" onclick="newview1()" name="img1">
]]>
CLASSIC POP-UP
JavaScript window.open Method
JavaScript allows you to create (open) new windows. Run whatever HTML code you wish in these windows. You can even have actions in one window effect another window.
The syntax of the window.open method is given below:
open (URL, windowName[, windowFeatures])
URL
The URL of the page to open in the new window. This argument could be blank.
windowName
A name to be given to the new window. The name can be used to refer this window again.
windowFeatures
A string that determines the various window features to be included in the popup window (like status bar, address bar etc)
You could add a TARGET="_blank" to the <a>-tag.
<![CDATA[
THE CODE
-----------------
function newview2()
{
image2 = document.img2.src;
window.open(image2,"Window1","
menubar=no,width=580px,height=480px,
toolbar=no,screenX=100px,screenY=100px");
}
. . .
<img src="../images/Dragon00.jpg" width=100px align=left border="3px"
style="margin:10px;" alt="click to view full image" onclick="newview2()" name="img2">
]]>
COMBINED MODAL/CLASSIC POP-UP
Browser considerations
Since only Internet Explorer supports this method you need to allow users an alternative.
Below is simple code to check for browser compatibility.
if (window.showModalDialog) {
win = window.showModalDialog("somedialog.html", ...);
}
else {
win = window.open("somedialog.html", ...);
}
<![CDATA[
THE CODE
-----------------
function newview3()
{
image3 = document.img3.src;
if (window.showModalDialog) {
window.showModalDialog(image3,"","
dialogWidth:560px; dialogHeight:440px;
resize:yes; status:yes; center:yes; dialogTop:100px;
dialogLeft:100px; help:no; minimize:no; maximize:yes;
border:thin; statusbar:yes;")
}
else {
window.open(image3,"Window3","menubar=no,width=580px,
height=480px,toolbar=no,screenX=100px,screenY=100px");
}
}
. . .
<img src="../images/Dragon00.jpg" width=100px align=left border="3px"
style="margin:10px;" alt="click to view full image" onclick="newview3()" name="img3">
]]>
CSS POP-UP
<![CDATA[
CSS FOR POP-UP IMAGE
Uses 1 <div> tag , 1 <a> tag, and two <img> tags.
--------------------------
/* CSS FOR POP-UP IMAGE */
/* CSS FOR TAG WITH ID PIC */
#pic { /* Style for DIV class pic */
position: relative; /* move the Large image off the page */
top: -440px; /* move the Large image off the page -440 px*/
}
/* CSS FOR TAG WITH ID PIC WITH CHILD <a> TAG WITH CLASS large */
/* THIS HIDES THE LARGE IMAGE */
#pic a .large {
border: 0px ; /* required - sets border:to nothing - like hidden */
height: 0px; /* required - sets height:to nothing - like hidden */
width: 0px; /* required - sets width:to nothing - like width */
}
/* CSS FOR TAG WITH ID PIC WITH CHILD <a> TAG WITH CHILD <img> TAG */
#pic a img { /* border is just for visual effect (optional) */
border: 3px solid #000000;
}
/* CSS FOR TAG WITH ID PIC WITH CHILD <a> TAG WITH CLASS pl USING PSEUDO-CLASS hover */
#pic a.p1:hover { /* THIS IS MAGIC - background-color is needed here */
background-color: #000000; /* other attributes will probably give the same effect */
}
/* CSS FOR TAG WITH ID PIC WITH CHILD <a> TAG WITH CLASS pl USING PSEUDO-CLASS hover
FOR CHILD WITH CLASS large */
/* THIS SHOWS THE LARGE IMAGE */
#pic a.p1:hover .large { /* various effect (required & optional) */
border: 3px solid #000000; /* optional border - replaces border:0px*/
height: 440px; /* required to resize - replaces height: 0px*/
width: 560px; /* required to resize - replaces width: 0px */
position: absolute; /* optional for location */
left: 100px; /* optional for location */
top: 100px; /* optional for location */
}
--------------------------
HTML
--------------------------
<div id="pic">
<a class="p1" href="#" title="thumbnail image">
<img src="../images/Dragon00.jpg"
width=100px
align=left
border="3px"
style="margin:10px;"
alt="Thumbnail image"
name="img4">
<img src="../images/Dragon00.jpg"
border="3px"
class="large"
title="Enlarged view of image" />
</a>
</div>
]]>