Publishing System Settings Logout Login Register
Create a CSS message box which hovers over your layout
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on March 3rd, 2007
25350 views
CSS Stylesheets
In this tutorial we will be creating a message box that overlays onto your layout, you can use it for many reasons like manitory sign-in on forums or an annoucement you need to be read. This tutorial is a combination off CSS and Javascript. To begin with you need to set-up the HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Over top message tutorial </title>
</head>

<body>
</body>
</html>


We will begin by writing the javascript code, the function we are going to write will be to close message box.

<script type="text/javascript" language="javascript"> 
function closeopen(tagid){
document.getElementById(tagid).style.display = (document.getElementById(tagid).style.display == "block") ? 'none' : 'block';
}
</script>


the code here changes the display characteristic off the specified ID. The if statement is the important part off this function, the structure off which amature coders may not be familiar with, its formed like this :-

 varaiable = (if statement) ? True : False; 


In the case above the if statement is

document.getElementById(tagid).style.display == "block"


the true statement

) ? 'none' :


and finally the false statement

 'block'; 


The IF statement is asking the element if its display is set to block and if it isn't then it is set to block therefore this function can be used to hide and show other things.

Now for the HTML and CSS.

<div id="hidepage" style="position: absolute; left:0px; top:0px; background-color: #000000; height: 100%; width: 100%;" onclick="javascript:closeopen('hidepage');">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table width="50%" align="center">
<tr>
<td align="center" style="background-color:#FFFFFF; border: 1px solid #666666; padding: 10px;">
<h1>Message Goes here!</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Message Underneath


The important part off this code is the styling on the outside tags

 style="position: absolute; left:0px; top:0px; background-color: #000000; height: 100%; width: 100%;" 


You also need to remember to add the ID tag and then the onclick function, the javascript function relys on the ID off the tag to determine what its suppost to close therefore in this example the ID is on the same tag as the onclick meaning it will close that tag.

All we need to do now is finish off the HTML document

</body>
</html>



 Arutha
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Arutha

As much as i love the default message i want to just say hello and to tell you to visit my blog :)
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top