Quantcast

No-Kill Pop Box (Instead of Popups)

Get the WebProNews Newsletter:
[ Business]

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 from http://www.iconico.com/caliper/ 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.

“WillMaster Possibilities” ezine

http://willmaster.com/possibilities/

mailto:possibilities@willmaster.com

No-Kill Pop Box (Instead of Popups)
Comments Off
Top Rated White Papers and Resources

Comments are closed.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom