Publishing System Settings Logout Login Register
Make A Javascript Popup Window
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on July 30th, 2007
19570 views
JavaScript
Ok, so this simple tutorial is going to show you how to make a javascript popup window.

To start off lets start our code:

<script language="JavaScript">

This tells the browser what type of code it is

function popUp(URL) {

This defines our function

eval("page" + id + " = window.open(URL, '" + id + "', '

This evaluates the code and prepares the window to open.

toolbar=1,

This decides if you want the toolbar to show in your popup window, 1 for yes 0 for no.

scrollbars=1,

Do you want scroll bars? 1 for yes, 0 for no

location=1,

Do you want to show the location (address bar)? 1 for yes, 0 for no

statusbar=1,

Do you want to show the status bar? 1 for yes, 0 for no

menubar=1,

Show the menu bar? 1 for yes, 0 for no

resizable=1,

Make it resizeable? 1 for yes, 0 for no

width=500,

Width of the window in pixels

height=500,

Height of window in pixels

left = 390,

Amount of pixels from the left hand side

top = 150');");

Amount of pixels from the top, also closes our function

}
</script>

This ends our code.

So our final code is:

<script language="JavaScript">

function popUp(URL) {
eval("page" + id + " = window.open(URL, '" + id + "', '
toolbar=1,
scrollbars=1,
location=1,
statusbar=1,
menubar=1,
resizable=1,
width=500,
height=500,
left = 390,
top = 150');");
}
</script>


This code goes into the <head> section of your webpage.

There are two ways of opening your window, either by a text link or by a form button. Make sure this code goes into the <body> section of your website.

To open it via a form button use this code:
<form>
<input type=button value="Open Popup" onClick="javascript:popUp('page.html')">
</form>


Make sure you edit page.html with the url of the page you want to opne in your popup window.

To open your popup window by a text link use this code:
<a href="javascript:popUp('page.html')">Open Popup[</a>


Again make sure you edit page.html

Well thats our tutorial, hopfully now you will be able to make your own pop up windows.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Oliverclews

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top