Pop Up Window

We use a pop up window to make getting the values of custom colors easy for our visitors.

Open the Color Picker demo

The complete script is shown below. It is split into two parts: the head and the link. Presenting them this way helps you be sure you are putting the elements in the correct place.

Three Step Installation

1. Create Content

Create pop up content. The pop up window content is a regular HTML page. Remember, this is a pop up, not a page opening in a new window.

Position the content of your pop up page in the top of the document.

Like this.

Excuse the page from any style sheets, themes, or other "automatic" content providers.

2. Paste Script

Copy and paste the script, found in head.txt, between the <head> and </head> tags of the page you want to host your popup.

Change a couple of values to fit your needs.

<!-- Begin
function popUp(URL) {
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=465,height=305,left = 175,top = 125');");
}
// End -->
</script>
        

Window appearance

  • toolbar=0 means that the popup will not have a browser toolbar.
  • scrollbars=1 means that it will have a scrollbar.
  • Continue across with the other, 0 = no and 1 = yes.

Height and Width

width=465,height=305

Set these to the width and height for your pop up. It's probably a good idea to give just a little border.

Position

left = 175,top = 125');");

Sets the distance from the edges of the open window in IE. NN will default the placement near the top left corner.

3. Create Link

<A HREF="javascript:popUp('color_picker.html')">Color Picker</A>