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

JavaScript showModalDialog method

JavaScript showModalDialog method

JavaScript showModalDialog method

Tutorials