JavaScript window object supports an open method to open a new browser window. The syntax for window.open method is as follows:
window.open("URL", "Target")
If the second argument doesn’t identify an existing window or frame, a new window or tab is created based upon the string passed in the third argument. With a missing third argument in window.open, the new window/tab is opened with the default browser window properties.
So, to open a pop-up window using JavaScript, the second argument for location should not match with any existing window or frame id, and the popup window size and properties can be assigned using a comma delimited string in the third argument:
window.open("URL","newpopup", "height=400,width=400,top=50,left=50,resizable=no");
This code opens a non resizable window that’s 400 X 400 and positioned 50 pixels from the top and left
of the screen. Here is the list of all the properties that can be set for the new pop-up window:
| Setting | Values | Description |
| fullscreen | yes/no | Browser window should be maximized or not. |
| height | number | Initial height of the new window (minimum 100). |
| width | number | Initial width of the new window (minimum 100). |
| top | number | Initial top coordinate (no negative number) |
| left | number | Initial left coordinate (no negative number). |
| menubar | yes/no | Display menu bar or not. |
| resizable | yes/no | Window can be resized or not. |
| scrollbars | yes/no | Display scroll bar or not. |
| status | yes/no | Display status bar or not. |
| toolbar | yes/no | Display tool bar or not. |
| location | yes/no | Display location entry field or not. |
The window.open() method also returns a reference to the newly created window. This reference object can be used to manipulate the newly opened window properties.
var popup =window.open("URL","newpopup", "height=400,width=400,resizable=yes");
//resize it
popup.resizeTo(500, 500);
//resize by
popup.resizeBy(100, 100);
//move it
popup.moveTo(100, 100);
//move by
popup.moveBy(100, 100);
//write to the new popup window
popup.document.write("<h1>New PopUp Window</h1>");
//close it
popup.close();
Here is an example code for Pop-Up window:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup Test</title>
<script type="text/javascript">
<!--
function popup() {
var width = 300;
var height = 200;
var prop = 'width=' + width + ', height=' + height;
prop += ', top=50, left=50';
prop += ', location=no';
prop += ', menubar=no';
prop += ', resizable=no';
prop += ', status=no';
prop += ', toolbar=no';
var newpopup = window.open('', 'newpopup', prop);
newpopup.document.write("<h1>New PopUp Window</h1>");
newpopup.document.write("<br /><a href='#' onclick='javascript:window.close()'>Close Me</a>");
if (window.focus) { newpopup.focus() }
return false;
}
// -->
</script>
</head>
<body>
<a href="javascript: void(0)" onclick="popup()">Pop-Up</a>
</body>
</html>
No comments:
Post a Comment
Thanks a lot for your valuable comments :)