No-Kill Pop Box (Instead of Popups)
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!
read the caveat below.)
can display it.
message between NOSCRIPT tags for those browsers. Here is an example:
The demo is at http://willmaster.com/a/20t/pl.pl?art204
The following instructions reference the source code of the demo.
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:
Here is an example text to close the pop box:
[Close this Window]
If your No-Kill Pop Box will have links to other pages, the link can contain
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:
Click for awesome deals!
In the above link, the onClick attribute
sets an internal timer for 3000 milliseconds. Once the 3 seconds has elapsed,
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.
Determine the pixel width and height of your No-Kill Pop Box table, and make
a note of the numbers. The shareware
is an ideal tool for this job. (PC only. If you know of similar software
for Mac, please let us know.)
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 -->
You'll replace some numbers in the DIV tag's style attribute. Here is the
div tag of the demo:
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
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
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.
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
If you need varying border widths or styles, you can use the following in
the DIV's style attribute:
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:
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:
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.
About the Author:
Bontrager Programmer/Publisher, "WillMaster Possibilities"
Are you looking for top quality scripts? Visit
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.