How to Create a Popup window?
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 | ||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||
| » | 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.
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> <input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createSimplePopupWindow();" value="Simple Popup" /></td>
<td> </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> <input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createPopupWithURL();" value="Create Popup" /></td>
<td> </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> <input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createPopup();" value="Create Popup" /></td>
<td> </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> </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> <input name="btnPopupWindow1" type="submit" id="btnPopupWindow1" onclick="javascript:createCustomContentPopupWindow();" value="Create Popup" /></td>
<td> </td>
<td><a href="javascript:void(0)" onclick="javascript:createCustomContentPopupWindow();" >Create Popup</a></td></tr>
</table>
</body>
</html>
JavaScript Validation
2 comments:
this make easier how to create pop up windows
Hello mate, nice post
Post a Comment