Home
Web Programming
JavaScript
Pop Ups
Level: All levels Software:
JavaScript popups are very useful, allowing you to provide additional information or functionality on a page without navigating away from it. JavaScript popups are very easy to implement, and you can customize them to some extent.
The basic syntax of a JavaScript popup is window.open('popup.html'). This creates a new window, opening popup.html from the current directory.
By specifying additional parameters you can control the width, height, position, toolbars and more.
The Basic Popup
The JavaScript:
|
function basic_popup()
{ window.open("popup.html", "My Popup"); } |
Implementing it with HTML:
| <a href="#" onclick="basic_popup();">Click here to open popup</a> |
This is the most basic popup window. It does not specify the window size or any other settings, and is basically the same as opening a link in a new window.
Controlling the size of your popup
The JavaScript:
|
function fixed_sized_popup()
{ window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350"); } // custom width and height function custom_sized_popup(width, height) { window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height); } |
Implementing it with your html
|
<a href="#" onclick="fixed_sized_popup();">Click here to open popup #1</a>
<a href="#" onclick="custom_sized_popup(250, 350);">Click here to open popup #2</a> |
This second method shows you how to control the size of the popup, the second example letting you specify the width and height of the popup.
Moving a popup window to a location on the screen
You can use the window.moveTo function to move the popup window where you like on the screen.
The code below shows the sized popups from above, with an extra line controlling where the popup sits on the screen.
|
function fixed_sized_topleft_popup()
{ mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350"); mypopup.moveTo(0,0); // top left } // custom width and height function custom_sized_centered_popup(width, height) { mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height); // calculate the center of the page x = (screen.availWidth - width) / 2; y = (screen.avaiHeight - height) / 2 // move to the center of the page mypopup.moveTo(x, y); } |
An example page
In case you're not sure how to use this in your html page, here's a demo!
|
<html>
<head> <title>JavaScript Popups by Stupidkid.Net</title> </head> <script type="text/javascript"> // our basic popup function basic_popup() { window.open("popup.html", "My Popup"); } // fixed size width and height function fixed_sized_popup() { window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350"); } // custom width and height function custom_sized_popup(width, height) { window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height); } // fixed size, positioned top left function fixed_sized_topleft_popup() { mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350"); mypopup.moveTo(0,0); // top left } // custom size, centered popup function custom_sized_centered_popup(width, height) { mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height); // calculate the center of the page x = (screen.availWidth - width) / 2; y = (screen.avaiHeight - height) / 2 // move to the center of the page mypopup.moveTo(x, y); } </script> <body onload="javascript: poponload()"> <h1>JavaScript Popups<hr /></h1> <a href="#" onclick="basic_popup();">A basic popup</a> <a href="#" onclick="fixed_sized_popup();">A popup with a fixed width and height</a> <a href="#" onclick="custom_sized_popup(300, 200);">A popup with a custom width and height</a> <a href="#" onclick="fixed_sized_topleft_popup();">A popup on the top left of the screen</a> <a href="#" onclick="custom_sized_centered_popup(400, 150);">A popup centered on the screen</a> </body> </html> |
As you can see, it's very simple to put popups in your page!
More Web Programming: Most Popular Materials | Fresh Materials
| More JavaScript Tutorials at LearnPHP.org