JavaScript showModalDialog method
In JavaScript, showModalDialog() method creates a simple modal
dialog box which is a simple html page but when a modal dialog opens, user can't switch to another page until it closes the modal dialog box.
Syntax:
| window.showModalDialog( url, arguments, feature options); |
Where url is the URL of page which is to be opened in modal window and arguments
are those arguments which we are passing to the modal window and feature
options
are the attributes set for the modal window.
Description of code:
Suppose we have an image file and we want to view that particular image file
into a separate modal window. It is an example of situation where we need modal
window. To illustrate showModalDilaog() method we have created two HTML
pages. In the first page we have placed an image and we will pass that image as
an argument to the modal window. When we will click on the image it calls the
function showModalWindow().
showModalDialogExample.html
<html>
<head>
<title>
showModalDialog method example
</title>
<script language="JavaScript">
function showModalWindow()
{
window.showModalDialog("ModalPage.html",
"Sample.jpg","resizable: yes");
}
</script>
</head>
<body>
<div style="background: #ff9900; width:'100%';"
align="center">
<font color="#0000ff" size="12pt">
<b>showModalDialog() Example</b>
</font>
</div>
<center>
<u><p>Click on the image to view full image</p></u>
<a href="javascript: showModalWindow();">
<img src="Sample.jpg" width="50" height="50" /></a>
</center>
</body>
</html>
|
As soon as the ModalPage.html is called , it calls the function showDialogArgs()
on the body load event of the page. Here in this function we have received
the arguments for the ModalPage by calling window.dialogArguments.
ModalPage.html
<html>
<head>
<title>Modal Page</title>
<script type="text/javascript" >
function showDialogArgs(){
if(window.dialogArguments==""){
alert("No image to display");
return false;
}else{
document.getElementById('mydiv').innerHTML =
"<img src='"+window.dialogArguments+"'/>";
}
}
</script>
</head>
<body onload="return showDialogArgs();">
<center>
<div style="background: #ff9900; width:'100%';"
align="center">
<font color="#0000ff" size="12pt">
<b>Modal page</b>
</font>
</div>
<div id="mydiv"></div>
</center>
</body>
</html>
|
Output:
To view full image in a modal panel click on the image.
You can also download full source code from the following link:
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
