Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

How to display a dynamically resizable Pop Up Window

Author: DevASP
Download Source Code :

This article is about how you can display a pop up window that will resize automatically according to the size of the size of image.

  • Steps you will do. 
  • Start visual studio and create a new web application. 
  • Place a label control on the form and set its following properties.
Text = “How to display automatically resizable pop up window”


Open the HTML design of your web page and add the following java script tag and function before closing the head tag.




 PositionX = 100;

 PositionY = 100;


 defaultWidth  = 500;

 defaultHeight = 500;


var AutoClose = true;


if (parseInt(navigator.appVersion.charAt(0))>=4){

 var isNN=(navigator.appName=="Netscape")?1:0;


 var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}


 var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;


 var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;


 function popImage(imageURL,imageTitle){


   if (isNN){'about:blank','',optNN);}


   if (isIE){'about:blank','',optIE);} with (imgWin.document){




     writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');




     writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');






     writeln('window.resizeTo(width,height);}');writeln('if (isNN){');      




     writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');

  if (!AutoClose) 


     writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')




    writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');


    writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');









Before closing the form tag add following tag which will create two buttons and display two images of different size in a pop up window.


<input type="button" value="Large Image In Popup" onClick="popImage('http://localhost/AutoResize/1.jpg','Large Image')" />


<input type="button" value="Small Image In Popup" onClick="popImage('http://localhost/AutoResize/2.jpg','Small Image')" />                


Article Comments
Hello, this script is great, the only problem is, when you use images with spaces : LOGO DANNY.jpg then it will not show. On my website people upload picture with spaces. I there a way with this script to solve this?



Posted on 1/30/2007 11:52:11 PM by Danny

Add Article Comment:
Name :
Email Address :
Comments :
<< Page Events in ASP.Net 2.0

Disclaimer - Privacy
© 2002-2015