|
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
<span> 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.
<span id="pop" class="popup">This is the text that will appear inside the popup window</span>
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.
<span style="position:relative;">
<span id="term1" class="popup">
This is the text that will appear inside the popup window
</span><a href="javascript:void(0);" onMouseover="ShowPop('term1');" onMouseout="HidePop('term1');">Popup Text</a></span>
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
highlighted
link term.
| 
Free Downloads
RSS Feed