How to create simple chromeless popup windows.
|
Hate 'em or love 'em; popup and
popunder windows are a constant companion during
our Internet forays. But they can be quite useful,
especially the chromeless variety.
A chromeless popup window is one that doesn't show
the browser menu or tool bar, but does retain the
title bar (for easy closing). Some visitors have
so many options on their tool bars that they take
up over a quarter of the screen height!
Chromeless popup windows are a great way to deliver
list information and extra help for filling in forms
without bogging down your pages.
There are many scripts available for creating popups,
but sometimes you'll just want something simple that
won't require you to incorporate 100 lines of JavaScript!
These manually triggered chromeless popup window
scripts will work in Netscape, Firefox and IE Versions
4+. It will create a link activated window of a fixed
size, but will allow for scrollbars if necessary.
Chromeless popup window instructions
First, create and save a standard
page with the information you wish to be displayed
in the popup window. The elements should be placed
within a table structure. Suggested width of table:
around 350 pixels.
And if you want to create a "Close this Window" link
in the page:
<a href="javascript:self.close()">Close
this window</a></td>
If you choose not to include this
snippet, visitors will still be able to close the
window via the popup window title bar controls.
Second, the script to launch the chromeless popup
window. Below are two options.
Popup script option 1
This option doesn't require a separate
link, because the link is embedded in the script.
Just copy and paste into your HTML code where you
want the link to the popup to appear - you'll only
need to change the "path/to" statement
to suit. Nice and easy :).
Popup script option 2
Copy and paste the below into the
HTML source code of the page you wish to launch
the popup from (change the path value to suit):
Calling the popup window
Next, the hyperlink to use to engage
script option 2 and launch the popup window.
(Change the properties in
capital letters to suit):
<a href="javascript:openpopup()">CLICK
HERE</a>
With both popup options, you can
change width and height to suit, but don't make it
too narrow, otherwise site visitors will need to
scroll horizontally to view the content. Too wide
a setting will cover the majority of the screen area
for those users still running lower monitor resolutions.
When copying scripts like the one above, ensure you
paste it into Notepad first; then copy it again and
transfer it to your HTML. Copying and pasting code
straight from a web page can produce some pretty
weird results, especially if you are using Microsoft
FrontPage.
Use automated popups with caution
- I don't know many visitors who upon entering a
site and seeing a popup window yell, "whoopeee!!!".
Michael Bloch
Taming the Beast
http://www.tamingthebeast.net
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce
Resources
____________________________
Copyright information.... This article is available
for reproduction only by first gaining express written
permission from Michael Bloch. This copyright statement
must be kept intact. Visit http://www.tamingthebeast.net
for free Internet marketing and web development articles,
tutorials and tools! Subscribe for free to our popular
ecommerce/web design ezine!
