How to Show Pop Up Window Using JavaScript
468x60
You can show pop up window By using 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 window, the boolean value to replace or not the current window.
The first argument of window.open() method allows to display 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 which 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 is given a default size and has a full set of UI components: a menu bar, status bar, toolbar etc.
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 same as written false.
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.
Here status bar is showing using status=yes and the window is resizable using resizable=yes, if you don't want to show status bar, you can use status=no and want the fixed window, can use resizable=no in the argument.
To open a new pop up window on onclick event of button, you can use the following code.
Preview:
To open a new pop up window on <a> href link, you can use the following code.
Preview:
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 you JavaScript code to refer to the new window and to specify the properties on it as given below.
The window.open() method takes four optional arguments which are URL of the window, Window name, attributes of 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");
The first argument of window.open() method allows to display 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 which 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 is given a default size and has a full set of UI components: a menu bar, status bar, toolbar etc.
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 same as written false.
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 status bar, you can use status=no and want the fixed window, can use resizable=no in the argument.
To open a new pop up window on onclick event of button, you can use the following code.
<input type=button name="open" value="Open window"
onclick="window.open('http://www.siteforinfotech.com/p/about-us.html
','new window', 'width=400, height=350, status=yes, resizable=yes');">
Preview:
To open a new pop up window on <a> href link, you can use the following code.
<a href="javascript:void window.open
('http://www.siteforinfotech.com/p/about-us.html', 'new window',
'width=400, height=350, status=yes, resizable=yes');
">Open Pop Up window</a>
Preview:
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 you 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:http://www.siteforinfotech.com");
w.location="http://www.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 tries to open a pop up 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 button and clicking on link.
Related Search Terms
Related Posts:
How to go Back Browsing History Using JavaScript
How to Click Button Using JavaScript?
How to Write JavaScript Function as URL in Hyperlink?
How to use Round, Random, Min and Max in JavaScript
How to Concatenate, Join and Sort Array in JavaScript?
How to Loop Through JavaScript Array?
How to Loop using JavaScript?
How to Show Pop Up Boxes Using JavaScript?
How to Write Conditional Statements in JavaScript?
How to Write JavaScript With HTML?
How to create Changeable Date and Time Using JavaScript?
How to Validate a HTML Form Using JavaScript?
How to create a simple form using HTML?
How to Create JavaScript Image Sideshow with Links
How to Display Date Format in JavaScript?
How to Validate a HTML Form Using JavaScript?
What are the Different Ways to Redirect Page in JavaScript?
How to create Timer Using JavaScript?
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to create a simple form using HTML?
468x60
250x300
التالي
« التدوينة السابقة
« التدوينة السابقة
السابق
التدوينة التالية »
التدوينة التالية »