Sunday, February 21, 2010

How to create a popup window


How to Create a Popup window?




Following example shows you how to create a popup window in your web application.





Popup window is a separate browser window opens when user clicks on a link or a button. Also you can create a popup window when onload event of a web page. In most cases popup window is generally smaller than the main browser window. A popup window can open programmatically, using javascript. Popup windows are useful when displaying additional information, without make the page refresh or keeping the visitor on the same page, instead of redirected to an another page. When displaying Privacy Policy information or related help topic, you can use popup windows.



Popup windows doesn't have all features of a normal browser window. You can on off toolbars, status bars, scrollbars, change the window placement, change width and height of the popup window. Also you can make full screen popup windows. Not also that but also you can create re sizable popup windows or popup windows that user cannot resize.



Demo- Create Popup Windows Using JavaScript.

» Click on the button or link to

create an empty popup window.
    Simple Popup
         
» Click on the button or link to

create a popup window that opens a URL.
    Create Popup
         
» Click on the button or link to create a

re sizable popup window with status bar,

scrollbars, menu bars and toolbars.
    Create Popup
         
» Create customizable popup window      

Popup window width  

pixel
Popup window height  

pixel
Left alignment of the popup window  

pixel
Top alignment of the popup window  

pixel
Should popup window has scrollbars  
Should popup window has status bar  
Should popup window has toolbar  
Should popup window can re sizable  
Should popup window has menu bar  
Should popup window display in full screen  
URL that you want to open in popup window  
   
Copy following generated code in to a Notepad and
save it as 'popup.html' and open it.
Create Popup
         
         
» Create a popup window with custom content.

You can create a popup window that contains any kind of HTML elements

such as buttons, text boxes, etc. You can also add a close button to close the popup window.
         
      Create Popup


* Please note you have to turn off popup blocker in your browser to test this example.

Some features may not work in some browsers.



Bookmark and Share



Try It!









1. Example code for create an empty popup window.

JavaScript Code

<script type="text/javascript" language="javascript">

<!--

function createSimplePopupWindow(){

var popup=window.open('', 'Title', 'width=350,height=350,left = 412,top = 284');return false;

}

-->

</script>

HTML Code


<html>

<head><title>How to create a simple popup window </title>

</head><body>

<table border="0"><tr>

<td>&nbsp;<input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createSimplePopupWindow();" value="Simple Popup" /></td>

<td>&nbsp;</td>

<td><a href="javascript:void(0)" onclick="javascript:createSimplePopupWindow();" >Simple Popup</a></td></tr>

</table>

</body>

</html>




2. Example code for create a popup window that opens a URL.

JavaScript Code

<script type="text/javascript" language="javascript">

<!--

function createPopupWithURL(){

var popup=window.open('http://www.google.com', 'Google', 'width=350,height=350,left = 412,top = 284');return false;

}

-->

</script>

HTML Code


<html>

<head><title>How to create a popup window with URL </title>

</head><body>

<table border="0"> <tr>

<td>&nbsp;<input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createPopupWithURL();" value="Create Popup" /></td>

<td>&nbsp;</td>

<td><a href="javascript:void(0)" onclick="javascript:createPopupWithURL();" >Create Popup</a></td></tr>

</table>

</body>

</html>




3. Example code for create a
re sizable popup window

with status bar,
scrollbars, menu bars and toolbars.

JavaScript Code

<script type="text/javascript" language="javascript">

<!--

function createPopup(){

window.open('http://www.google.com','Google','toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=400,height=400,left=280,top= 100');return false;

}

-->

</script>

HTML Code


<html>

<head><title>How to create a popup window </title>

</head><body>

<table border="0"> <tr>

<td>&nbsp;<input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createPopup();" value="Create Popup" /></td>

<td>&nbsp;</td>

<td><a href="javascript:void(0)" onclick="javascript:createPopup();" >Create Popup</a></td></tr>

</table>

</body>

</html>




4. Example code for create a
popup window with custom content.

JavaScript Code

<script type="text/javascript" language="javascript">

<!--

function createCustomContentPopupWindow(){

var popup= window.open('','Google','width=350,height=180,left=412,top=284');

popup.document.write('<html><head><title>Simple Popup Window</title></head><body><table border="0">');

popup.document.write('<tr><td><h1 style="color:#FF9900;text-align:center">Hello!</h1>');

popup.document.write('<h4 style="color:#0000E6;text-align:center;">');

popup.document.write('Now you can create any kind of popup window.</h4></td></tr>');

popup.document.write('<tr><td>&nbsp;</td></tr><tr><td align="right">');

popup.document.write('<input name="btnClose" type="submit" id="btnClose" value="Close"');

popup.document.write('onclick="javascript:self.close();" /></td></tr></table></body></html>');

return false;

}

-->

</script>

HTML Code


<html>

<head><title>How to create a popup window with custom content</title>

</head><body>

<table border="0"> <tr>

<td>&nbsp;<input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createCustomContentPopupWindow();" value="Create Popup" /></td>

<td>&nbsp;</td>

<td><a href="javascript:void(0)" onclick="javascript:createCustomContentPopupWindow();" >Create Popup</a></td></tr>

</table>

</body>

</html>






 »   How to get screen resolution in JavaScript
 »   How to limit characters in textarea using JavaScript
 »   How to validate decimal number in JavaScript
 »   How to validate an email address in JavaScript
 »   How to validate date using JavaScript
 »   JavaScript String functions
 »   How to validate multiple select list box in JavaScript
 »   How to generate random numbers in JavaScript
 »   How to validate multiple check box in JavaScript
 »   How to validate user login in JavaScript
 »   How to validate drop down list in JavaScript
 »   How to validate radio button group in JavaScript
 »   How to create JavaScript alerts
 »    How to create popup windows in JavaScript
 »   How to count words in a text area using JavaScript



©-Copyright By Duminda Chamara   
JavaScript Validation  

2 comments:

Unknown said...

this make easier how to create pop up windows

Arnold Greg said...

Hello mate, nice post