How To Show PopUp Window Using JavaScript

You can show a popup window By using the JavaScript window.open() method which loads specified URL into a new or existing window and returns the window object that represents that window.

The window.open() method takes four optional arguments which are URL of the window, Window name, attributes of the window, the boolean value to replace or not the current window.

Syntax: window.open("windowname.html", "New Window", "width=width in pixel, height=height in pixel, status=yes or no, resizable=yes or no");

Table of Contents

Arguments of the window.open() method

The first argument of window.open() method allows displaying a given URL in the new window. If the argument is omitted, the special blank-page URL:about: blank is used.

The second argument of window.open() method is a string that specifies a window name. If the argument is omitted, the special name “_blank” is used which opens a new, unnamed window.

The third optional argument of window.open() method is a comma-separated list of size and features attributes for the new window to be opened. If you omit this argument, the new window will appear with a default size and has a full set of UI components: a menu bar, status bar, toolbar, etc.

Also Read: How to Show Pop Up Boxes Using JavaScript?

The fourth optional argument of window.open() is useful only when the second argument names an existing window. It is a boolean value that indicates whether the URL specified as the first argument should replace the current entry in the window’s browsing history: written true, or create a new entry in the window’s browsing history: written false. And omitting the argument is the same as written false.

Examples of using window.open() method

Here is an example to open a small but resizable browser window with a status bar but no menu bar, tool-bar, or location bar.

window.open("new_window.html", "New Window", "width=400, 
height=350, status=yes, resizable=yes");

Here status bar is showing using status=yes and the window is resizable using resizable=yes, if you don’t want to show the status bar, you can use status=no and want the fixed window, can use resizable=no in the argument.

Also Read: How to Write Conditional Statements in JavaScript?

To open a new pop up window on onclick event of the button, you can use the following code.

<input type=button name="open" value="Open window"
onclick="window.open('https://siteforinfotech.com/p/about-us.html 
','new window', 'width=400, height=350, status=yes, resizable=yes');">

Preview:

A popup window will open when you click on the button below.

To open a new pop up window on a hyperlink, you can use the following code.

<a href="javascript:void window.open
('https://siteforinfotech.com/p/about-us.html', 'new window', 
'width=400, height=350, status=yes, resizable=yes');
">Open Pop Up window</a>

Preview

When you click on the following link, it will open a popup window.

Open Pop Up window

The return value of the window.open() method is the window object that represents the named or newly-created window. You can use this window object in your JavaScript code to refer to the new window and to specify the properties on it as given below.

var w=window.open();
w.alert("You are going to visit:https://siteforinfotech.com");
w.location="https://siteforinfotech.com";

Here you can specify other properties like width, height, status, resizable given above. And you can assign variable w for any windows event or on any event trigger using JavaScript.

“Pop Up” and “Pop Under” advertisements are made by using this method window.open() while you browse the web. JavaScript codes that will try to open a popup window when the browser first loads, browsers blocked them. So the advertisements are made to run pop up windows only in response to a user action such as clicking on the button and clicking on the link.

Please follow and like us: