Simple Pop-up Window

I tend to use this little bit of javascript quite a bit so I thought I would share. You can use this little javascript to add a “Pop-up” window effect to links in your website.

For example, if you have a page of product images and Item numbers you can make them link to a “Pop-up” window with the item details.

Making a lot of these pages can be very cumbersome so I suggest automating the page creation by pulling the item detail from a database. This can be achieved very simply by running a Cold Fusion Query… I’ll talk about that later.. But, for now here is the Javascript:
Place this first bit of code in the head of the document that will be calling the new window.

<script LANGUAGE=”JavaScript”>
<!–
function pop(url)
{
window.open(url,’profile’,’width=450,height=500,scrollbars,resizable’);
}

function printWindow(){
version = parseInt(navigator.appVersion)
if (version >= 4) window.print()
}
//–>
</script>

This is where we define the properties of the new window that will be created. We define a width of 450 pixels and a height of 500 pixels. This can be set however large/small you need it.
Then we say we allow scroll bars (in case our content goes beyond the new window size), and we allow the window to be re-sized.
Here are some of the features that we can use to define our windows:

• channelmode – Specifies if window should be opened in channel mode. IE only.
• fullscreen – Specifies if window should be opened in full screen mode. IE only.
• height – Specifies the height of the window.
• left – Specifies the x coordinates of the window in pixels. IE only.
• location – Specifies if the location bar of the window should be included.
• menubar – Specifies if the menu bar of the window should be included.
• resizable – Specifies if window should be resizable.
• screenX – Specifies the x coordinates of the window in pixels. NS only.
• screenY – Specifies the y coordinates of the window in pixels. NS only. See “top” as well.
• scrollbars – Specifies if window should contain scrollbars.
• status – Specifies if the status bar of the window should be included.
• toolbar – Specifies if the toolbar of the window (ie: reload button) should be included.
• top – Specifies the y coordinates of the window in pixels. IE only.
• width – Specifies the width of the window.

Now, we call this new window by creating our link with the following information:

<code>
<a href=”javascript:pop(‘detail.cfm’)”>Click here for more information.</a>
</code>

Note: the file name to be called must be enclosed in’ ‘.

© 2006 – 2009, Robert Owen. All rights reserved.