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.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact Advertise on Bucaro TecHelp Advertise Here RSS News Feeds News Feeds

Receive notification when a new article, information, or content has been posted to this website.

Email address:


Powered by FeedBlitz


Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML5 Solutions: Essential Techniques for HTML5 Developers

Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Easy CSS Popup Windows

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 This is the text that will appear inside the popup window highlighted link term.



RSS Feed RSS Feed





Web Design Sections

CSS3: Visual QuickStart Guide

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.

[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2014 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268