In this article I will explain with an example, how to open popup using
window.open in
JavaScript.
JavaScript window.open
The
JavaScript window.open function is used to open a popup window.
The window.open function returns the object of the opened Popup window.
Syntax
Parameters
URL – URL of the page to be opened.
Optional Parameters
ID - Id of the Popup Window.
toolbar - Enable/Disable toolbar of the Browser values. Accepted values (1/0, yes/no).
scrollbar - Enable/Disable scrollbar of the Browser values. Accepted values (1/0, yes/no).
location - Enable/Disable location field of the Browser values. Accepted values (1/0, yes/no).
menubar - Enable/Disable menubar of the Browser values. Accepted values (1/0, yes/no).
resizable - Enable/Disable resizing of the Browser values. Accepted values (1/0, yes/no).
statusbar - Enable/Disable statusbar of the Browser values. Accepted values (1/0, yes/no).
width - Width of the Browser in Pixels.
height - Height of the Browser in Pixels.
top - Position of the Browser on Y Axis in Pixels.
left - Position of the Browser on X Axis in Pixels.
HTML Markup
Popup page
The following HTML Markup consists of a greeting text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ASPSnippets</title>
</head>
<body>
Welcome to ASPSnippets.
</body>
</html>
Parent page
The following HTML Markup consists of:
Button – For open the new Popup.
The Button has been assigned with an onclick event handler.
<input id="btnOpenPopup" type="button" value="Open Popup" onclick="OpenPopup('Popup.htm')" />
Opening Popup window on Button click using JavaScript
When the
Open Popup Button is clicked, the
OpenPopup JavaScript function is called which opens a popup window using the
window.open JavaScript function.
Finally, the focus function is called to bring the popup window in focus
<script type="text/javascript">
function OpenPopup(url) {
var popupObject = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no," +
"menubar=no,resizable=0,width=250,height=200,left=800,top=200");
popupObject.focus();
}
</script>
Screenshot
![Open Popup using window.open in JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
