How to Display a New Javascript Window With Dimensions
Popup windows display Web pages in small browser windows often limited in size and functionality. Though out of fashion in modern Web design, popups still have their uses in a variety of contexts, such as opening an audio player to allow the visitor to continue browsing the site while listening to music. The "window.open" method in JavaScript creates popups that load existing Web pages. You can control the dimensions of the popup window by setting a width and height within that method.
Other People Are Reading
Instructions
-
-
1
Open the Web page where you want to add the popup window in Notepad or a code editor. Locate "<script>" tags in either the header or footer code:
<script type="text/javascript>
// JavaScript code goes in here
</script>
Add "<script>" tags with the "type" attribute set to "text/javascript" if your page does not already contain them. Put them between the "<head>" tags or on the line above the closing "</body>" tag.
-
2
Start writing a new function between the "<script>" tags:
function popupWindow () {
}
-
-
3
Use "window.open" to create your popup. Specify the Web page you want to open in the window and give it a name. Add the width and height between a single pair of double quotation marks with a comma separating them:
function popupWindow () {
window.open ("http://somedomain.com/page.html","newpage","width=400,height=300");
}
All settings you give the popup window, such as scrollbars or the address bar, go between that same pair of quotes.
-
4
Add a link somewhere in the body of your Web page. Set the "onclick" attribute to your JavaScript function:
<a href="http://somedomain.com/page.html" onclick="javascript: popupwindow(); return false;">Click Me</a>
Set the "href" attribute to the Web page the popup will open. Adding "return false" after the function will keep the main window from going to the new page, but when the user turns off JavaScript, the link will simply load in the main window.
-
1
Tips & Warnings
Add the "onload" code to the opening "<body>" tag instead of a link to make the popup open whenever a visitor loads the Web page.
Use popup windows sparingly. The more complicated a popup becomes, the more likely you will need to create different code for different browsers to display it properly. Users also block popups, and some Internet Explorer versions automatically open popups in tabs instead of new windows as a default setting.
