No-Kill Pop Box (Instead of Popups)
By
William
Bontrager
Are you tired of popup killers
also killing your income?
Today you will learn about a way to present the information previously put
in popup windows, yet popup killers can't kill this pop box!
This pop box displays even if the browser has JavaScript turned off. (Please
read the caveat below.)
The pop box is created using layers, which is why JavaScript disabled browsers
can display it.
However, the pop box is closed with JavaScript. Thus, if the browser has
JavaScript turned off, the user won't be able to close the pop box. It may
be prudent to have a "JavaScript disabled browsers can't close this box"
message between NOSCRIPT tags for those browsers. Here is an example:
<noscript>
JavaScript must be turned on to close this box.
</noscript>
The demo is at http://willmaster.com/a/20t/pl.pl?art204
The following instructions reference the source code of the demo.
Step One
On an otherwise blank web page, create a table that looks like you want the
No-Kill Pop Box to look.
Use a table to contain the content. Dimensions and padding can be specified
right in the TABLE tag.
If you want borders, give the table borders. If you want images, put those
in there. The table you create will be what's displayed as the pop box.
If you want the pop box to look like a regular popup window, you'll need
to provide images and/or background colors to create the appearance. If you
provide graphics or text for closing the pop box, the link's HREF is:
href="javascript:CloseNoKillPopBox()"
Here is an example text to close the pop box:
<a href="javascript:CloseNoKillPopBox()">
[Close this Window]
</a>
If your No-Kill Pop Box will have links to other pages, the link can contain
the
target="_blank"
attribute so a click opens a new browser window. The same click can also
close the No-Kill Pop Box, if you wish, but it needs to close after the new
window has opened.
This is how to do it:
<a href="http://domain.com/page.html"
target="_blank"
onClick="setTimeout('CloseNoKillPopBox()',3000)">
Click for awesome deals!
</a>
In the above link, the onClick attribute
sets an internal timer for 3000 milliseconds. Once the 3 seconds has elapsed,
the JavaScript function CloseNoKillPopBox() is called (the same function
used in the link to close the pop box). The number 3000 can be changed to
your preference. And, if you don't want the pop box to close after the link
is clicked, simply omit the onClick attribute.
Step Two
Determine the pixel width and height of your No-Kill Pop Box table, and make
a note of the numbers. The shareware
calipers software
is an ideal tool for this job. (PC only. If you know of similar software
for Mac, please let us know.)
Step Three
Make a copy of the demo source code. Now, replace everything between the
<div... and </div> tags with the table you created in Step One.
That would be everything between the place marked as
<!-- Border of No-Kill Pop Box -->
and the place marked as
<!-- End of border -->
Step Four
You'll replace some numbers in the DIV tag's style attribute. Here is the
div tag of the demo:
<div
id="BetterThanPopup"
style="
top: 100;
left: 250;
width: 306px;
height: 206px;
padding: 0;
position: absolute;
z-index: 1;
visibility: show;">
In the style attribute, you'll see
a width: value. Replace the number 306 with the actual pixel width of your
No-Kill Pop Box table, the number you noted in Step Two.
You'll also see a height: value. The number 206 needs to be replaced with
the pixel height you noted in Step Two.
In the style attribute, you'll also see a top: value and a left: value. Those
numbers represent how far from the top edge and how far from the left edge
of the browser window to put the top-left corner of the No-Kill Pop Box.
If you don't know the exact position where you want the pop box, guess at
the numbers for now. Later, when the pop box is placed on your page, you
can adjust these numbers to put it exactly where you want it.
There is one more style attribute value to mention, the z-index: value. The
number 1 puts this layer on top of other content on the page, so long as
there are no other layers with an equal or higher z-index: value.
If the pop box is not the only layer on the page, the z-index: value number
should be one higher than the highest number of the other layers on the
page.
Step Five
Copy all of the No-Kill Pop Box, including the JavaScript and the DIV tag,
and paste it into your web page near the bottom of the BODY area. (Actually,
you should be able to put it anywhere in the BODY area, but Netscape 4.#
sometimes has problems displaying top layers if their code is put above other
page content.)
The No-Kill Pop Box code to copy is marked in the demo starting at
<!-- Beginning of No-Kill Pop Box code -->
and ending at.
<!-- End of No-Kill Pop Box code -->
Load the web page into your browser and adjust its position as desired.
Notes
These notes are not things you actually need to know to make a No-Kill Pop
Box. If you're interested in using other style attributes for some of the
display characteristics, the notes may be of interest.
The reason a table is used to create the No-Kill Pop Box content is because
the border and margins for layers do not display consistently from browser
to browser.
If you need varying border widths or styles, you can use the following in
the DIV's style attribute:
border: black;
border-style: dotted;
border-top-width: 6px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-width: 1px;
However, if a solid border (or no border) is okay, and each side is to have
the same border width, then using a table to create the borders will prove
more consistent from browser to browser.
Similarly, if you need varying margins, these can be used:
margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px;
margin-right: 10px;
If you can create your desired margins with a table, it will prove more
consistent from browser to browser than will the margin specifications in
the style attribute.
Background color is another display characteristic more consistent when specified
within a table rather than in a style attribute. If you have reason to specify
the background color in the style attribute, here is an example:
background-color: #EFEFEF;
The content of the No-Kill Pop Box can be formatted with either HTML or CSS.
In the demo, the top part of the No-Kill Pop Box, where clicking will close
the box, uses HTML. The rest uses CSS.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
