Html Pop up page using javascript

by Php Ninza on July 29, 2009

Html pop up pages are legacy ways that are used across all the web for showing small snippets of information , However they are fastly replaced via Lightbox nowadays !

Here in this tutorial we will be creating a popup javascript function which can be called multiple times on a webpage for creating different popups !, These javascript functions are easy to create and call from the links in html webpage

First of all create a file called popup.js



function popup(URL) {
var popup_width = 600
var popup_height = 400
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width='+popup_width+',height='+popup_height+'');");
}

This javascript function popup will take URL in the argument and will create a new popup page when executed , The height and width of the popup page can be adjusted via popup_width and popup_height !, This function uses the inbuilt functiionality of javascript by using window.open !, This window.open takes url , id and various parameters for creating the popup page.

This simple and nifty popup page can be called via a simple href link in a html page , A small example is given below.

<a href="javascript:popcontact('pop-up.htm')">Click here</a>

Hope this tutorial helped you to learn basics of creating a popup page , Let us know your thoughts , comments and questions on comments !, We will love to help you !

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

{ 3 comments… read them below or Shout @ me! }

phpcollection July 29, 2009 at 12:04 pm

New blog post: Html Pop up page using javascript http://bit.ly/15IT3C

This comment was originally posted on Twitter

Reply

Free JavaScript Code July 30, 2009 at 1:03 am

very cool & good tip, thank you very much for sharing.

Reply

Php Ninza July 30, 2009 at 2:11 am

@Free Javascript Code

You are welcome! , Keep in touch !

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: