Use JavaScript’s window.open() method to open the popup window in JavaScript. Popup windows are different from simply opening a new browser window.
open()
open(url)
open(url, target)
open(url, target, windowFeatures)JavaScript opens a popup window
Simple example code calls the function, passing the URL as a parameter, whenever you want to open a popup window.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Open Popup" onclick="basicPopup('https://tutorial.eyehunts.com/')">
<script>
function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</script>
</body>
</html>Output:
Javascript to open a link in a new pop-up window
<a href="//somesite.com/" class="social_share_link"
onclick="return !window.open(this.href, 'somesite', 'width=500,height=500')"
target="_blank">Share</a>Window Features Options:
- width: Width of the window (in pixels).
- height: Height of the window (in pixels).
- resizable: Whether the window is resizable (
yesorno). - scrollbars: Whether the window has scrollbars (
yesorno). - menubar: Whether the window has a menu bar (
yesorno). - toolbar: Whether the window has a toolbar (
yesorno). - status: Whether the window has a status bar (
yesorno).
You can customize these options based on your requirements. Note that some modern browsers have restrictions on opening popups (to prevent unwanted popups), so ensure your popup is user-initiated (e.g., via a button click) to avoid being blocked.
For example, to include the toolbar and location bar:
const windowFeatures = 'width=600,height=400,top=100,left=100,resizable=yes,scrollbars=yes,status=yes,toolbar=yes,location=yes';Closing the Popup
To close the popup window from the main window or within the popup itself, you can use the window.close() method:
// From the main window
const popup = window.open(url, windowName, windowFeatures);
popup.close();
// From within the popup
window.close();These examples should cover most of the basic use cases for opening and managing popup windows in JavaScript.
Do comment if you have any doubts or suggestions on this JS topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version