Monday, June 1, 2009

JavaScript Pop-up window

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>

Technorati Tags:

3 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete

Thanks a lot for your valuable comments :)