JavaScript New Window (popup)

Javascript Popup Window

In Javascript, one of the most convenient and easy uses for the Window Object is to create a new window. The window.open() method, which allows you to open up new browser window without navigating away from the current page. It is useful when you need to display some popup advertisement or the instructions without navigating away from the current window.

Syntax

window.open(url, windowName, "attributes");

example

<html>
<head>
<script type="text/javascript">
	function popWindow() {
		var newWindow = window.open("", "", "width=300, height=200");
	}
</script>
</head>
<body>
	<button onclick="popWindow()">Open New Window</button>
</body>
</html>

In the above Javascript code, window.open() method opens a window with the specified parameters and this method returns a reference to the window that was opened.

Important Parameter of window.open() method

url: The specified URL to display within the new window.

name: name: The name of the new window (optional).

left: The left position of the new window relative to the left edge of the screen.

top: The top position of the new window relative to the top edge of the screen

height: The height of the new window.

width: The width of the new window

<html>
<head>
<script type="text/javascript">
	function popWindow() {
		var newWindow = window.open("http://www.corelangs.com", "_blank", "top=100, left=100, width=800, height=500");
	}
</script>
</head>
<body>
	<button onclick="popWindow()">Open New Window</button>
</body>
</html>

Other Parameters

toolbar: It displays the default toolbar on your new window, you can set "Yes" or "No" values

menubar: It displays the standard menu bar on your new window, you can set "Yes" or "No" values

scrollbars: It displays a horizontal and vertical scrollbars if the content is too large for the specified area, you can set "Yes" or "No" values

resizable: It will allow the user to resize the new window, you can set "Yes" or "No" values

E.g.

<html>
<head>
<script type="text/javascript">
	function popWindow() {
		var newWindow = window.open("http://www.corelangs.com", "_blank", "top=100, left=100, width=800, height=500,
		menubar=yes,toolbar=yes, scrollbars=yes, resizable=yes");
	}
</script>
</head>
<body>
	<button onclick="popWindow()">Open New Window</button>
</body>
</html>

Normally only the first three arguments are used to open a new popup window in Javascript. It is important to note that the new window will not open if the user disabled the JavaScript in the browser, because various browser policies and user settings may prevent you from opening a popup window. Moreover now a days most browsers have a built in pop-up blocking software for blocking to abuse of the technique for marketing purposes.