Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy CSS Popup Windows

By Stephen Bucaro

Popups are usually created by using JavaScript to open a new browser window. But with today's Cascading Style Sheets (CSS) capable browsers you don't need to open a new browser window. Instead, you can create popups by applying styles to html or <div> elements.

The easiest way to create a CSS popup is to define the contents of your popup within a span anywhere on your web page as shown below.

This is the text that will appear inside the popup window

Note that this span references a style class named "popup". The code for that class is shown below. This code should be placed in the <head> section of your web page.

<style type="text/css">
.popup
{
   position:absolute; left:0; top:0; width:132;
   border-style:solid;
   border-width:4;
   border-color:blue;
   background-color:yellow;
   padding:5px;
   color:red;
   font-family:Arial;
   font-weight:bold;
   font-size:10pt;
   z-index:2;
   visibility:hidden;
}
</style>

Because the purpose of this article is give you some quick easy code to for creating CSS popups, I am not going to go into the details of the CSS code above. It should be easy to follow without any knowledge of CSS. The color:red entry in the code controls the color of the text inside the popup. Everything else is somewhat self explanatory.

Note the entry for visibility:hidden. This prevents the popup from being visible when the web page first loads. Next we need a couple of Java Script functions to control the visibility of the popup. That code is shown below. This code would be placed in the <head> section of your web page.

<script language="JavaScript">
function ShowPop(id)
{
   document.getElementById(id).style.visibility = "visible";
}
function HidePop(id)
{
   document.getElementById(id).style.visibility = "hidden";
}
</script>

View Code

Again, because the purpose of this article is give you some quick easy code for creating CSS popups, I am not going to go into the details of the Java Script code. It should be easy to follow without any knowledge of Java Script. The code contains two fuctions, one to change the visibility of the span to visible and one to change the visibility of the span to hidden We pass the id of the span to both functions.

In this example the popup will appear as a result of the user moving the mouse pointer over a highlighted word or phrase. The word or phrase is actually contained within a null link. That is, a link that doesn't load a new page when we click on it. Even though the link doesn't "do anything", that doesn't mean we can't still use its onMouseover and onMouseout events to execute those Java Script functions. The code for this link is shown below.

<a href="javascript:void(0);"
onMouseover="ShowPop('pop');"
onMouseout="HidePop('pop');">Popup term</a>

This code should be placed in the <body> section of your web page. Just place it in your web page text and change the words "Popup term" to the word or phrase that you want to cause the popup window to appear.

This is great if your web page is relatively small. The popup appears in the upper left corner of the web page when the user moves the mouse pointer over the highlighted text. A problem occurs if your web page is large. The position where the popup appears may be scrolled out of the visibile area of the page. The solution to that problem is trivial to code but a bit difficult to explain. To avoid the problem, don't use the previous span and link code. Instead combine them into one as shown below.

This is the text that will appear inside the popup window <a href="javascript:void(0);" onMouseover="ShowPop('term1');" onMouseout="HidePop('term1');">Popup Text</a>

The code above defines nested spans. The outer span has its postion defined as "relative". This means that as the browser lays out the web page, the span (although invisible) will flow into position along with the rest of the text and web page elements. The inner span's position is then relative to its parent, the outer span. The result is that the popup's position is always near the This is the text that will appear inside the popup window highlighted link term.