Thursday, September 19, 2024

No-Kill Pop Box; Part II

In the “No-Kill Pop Box (Instead of Popups)” article, the first part of this series, code was provided to make a box of content pop onto the web page the visitor is viewing. It was presented as an alternative for webmasters who are losing income because of pop-up killers.

A pop box is content within a rectangular area that might or might not be visually similar to a pop-up, but which displays on top of the content of the current web page rather than in a separate window of its own.

This type of message delivery mechanism has been called pop-in, pop-on, pop over, and pop box. Here, we use the term “pop box.”

This article will provide code to delay the appearance of the pop box and the ability to display and vanish the pop box with clickable links.

There is an important distinction between pop-ups and pop boxes. Intellectually, it’s understood that pop-ups are separate windows and pop boxes are part of the current window. However, when a webmaster decides to use pop boxes, several things become clear.

  • Unlike pop-ups in their own separate window, the
    pop box must be designed to work with the web page,
    else the page looks cluttered.
  • Every pop box covers some of the window’s content.
    Unless they’re stacked on top of each other, the
    number of pop boxes on a page is self-limiting.
  • If the surfer feels abused by the content or number
    of pop boxes, s/he can simply close one window (or
    go to a different page) and all the pop boxes close
    along with the window.

Pop boxes can be controlled in ways similar to how pop-ups can be controlled. Examples:

  • Display only once per visit.
  • Display after visitor has seen three pages.
  • Display on every page until a certain action is
    taken.
  • Display 90 seconds after a page loads.
  • Jiggle it a bit if it stays open more than three
    minutes.
  • When one is closed, another displays.

But when the web page is closed, the pop boxes are closed too, automatically. There is no residue — no windows are spawned all over the desktop. Everything is connected to the web page, all nice and tidy.

Maybe that will let Internet users feel more in control and be more accepting than they have been of pop-ups. Whether or not pop boxes will be more effective marketing tools remains to be seen.

The “No-Kill Pop Box (Instead of Popups)” article provided the basic code to create a pop box that contains a link with which to close it. Please see that article, linked from http://willmaster.com/a/20t/pl.pl?archives for instructions on how to make the pop box.

With the addition of one JavaScript function, the pop box can have a delayed opening and can have links outside the pop box to open and close it. The additional function is named OpenNoKillPopBox() and is the first function in the code on the demonstration page. See http://willmaster.com/a/20t/pl.pl?art206

Once you’ve installed the above, the pop box layer code style should be changed from

visibility: show;

to

visibility: hidden;

That will keep the pop box closed until an “open pop box” link is clicked or until it is automatically opened by JavaScript code. See below for both methods.

This will put a “open pop box” link on the web page:

<a href=”javascript:OpenNoKillPopBox()”>
Open the pop box.
</a>

This will put a “close pop box” link on the web page:

<a href=”javascript:CloseNoKillPopBox()”>
Now close the pop box.
</a>

And this will open the pop box 10 seconds after the pop box code on the page has loaded:

<script type=”text/javascript” language=”JavaScript”><!–
setTimeout(‘OpenNoKillPopBox()’,10000);
//–> </script>

If you want the pop box to open sooner or later, adjust the number 10000 to reflect the appropriate number of milliseconds delay.

The above gives you more control over your pop boxes.

Future installments of this series will include techniques to control pop boxes similar to how pop-ups can be controlled.

“WillMaster Possibilities” ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles