Javascript and CSS - Easy Pop-Up Help Balloons

Javascript and CSS - Easy Pop-Up Help Balloons

I needed some pop-up help balloons for a site I am working on. There are plenty of available options and javascript classes to do this for you, but I can never resist doing things myself.

Copy and paste into an html document and play with the variables to see what it does.

By default the pop-up boxes will come up inline, but if you specify the "top" and "left" properties, and set display to "block" in the first div tag, you can make the messages come up on the screen anywhere you like.

Colors and sizes, etc. are also controlled in the div tag, with the <a> tag being for the X that closes pop-up.

As explained below, you can use this over and over again on the same page, provided you change the ID names where instructed.

NOTE: If you copy and paste this code, watch out for spaces and line returns put in by the browser.

<html>
<body>
Here is the Balloon Template:
<script type="text/javascript">
function displayBalloon(id,toggle) {
if (toggle == "on") {
document.getElementById(id).style.display = "inline";}
else {
document.getElementById(id).style.display = "none";}
}
</script>



<div id=xxxxxNAMExxxxx style='top:;left:;width:250px;height:125px;color:white;background-color:#ba0118;border-style:solid;border-width:3px;border-color:#000000;padding:15px;text-align:left;position:absolute;display:none;text-decoration:none;'>

<a style='font-family:sans-serif;font-size:24px;font-weight:normal;text-align:left;display:block;line-height:8px;margin:-5px 0px 8px -8px;padding:0px 0px 0px 0px;' onMouseOver="this.style.fontWeight='bold';" onMouseOut="this.style.fontWeight='normal';" onClick="displayBalloon('xxxxxNAMExxxxx','off');return false">×</a>

<div style="display:inline">xxxxxBOXTEXTxxxxx</div></div><a href=# class="darklink" style="text-decoration:none;" onClick="displayBalloon('xxxxxNAMExxxxx','on');return false;"><b>xxxxxCLICKTEXTxxxxx</a>:</b>
</body>
</html>

Previous Article: Javascript Ajax Call

Next Article: onClick Javascript