Home Javascript JavaScript showModalDialog method

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript showModalDialog method

Advertisement
In JavaScript, showModalDialog() method creates a simple

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

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 24, 2009

Related Tutorials

Discuss: JavaScript showModalDialog method   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
Purushottam Singh
June 7, 2011
fix the size of modalDialog

can i fix the size of modalDialogWindow so that whenever a new modalDialog appears if should be of a specified size ? if yes then how? give example code. Thanks in advance.
Sudeendra
August 28, 2012
Title of webpage dialog.

When we use showModalDialog() in javascript.The title of the page comes as "Webpage dialog". In my application i dont want this default Title. Can we change this title?. How it can be done?. Please help me.
DMCA.com