<!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>Example: Closable Message Boxes</title>
<script>
function closeBox(toClose) {
document.getElementById(toClose).style.display = "none";
setCookie(toClose, "closed", 365);
}
function setCookie(cName, value, expiredays) {
var expDate = new Date();
expDate.setDate(expDate.getDate()+expiredays);
document.cookie=cName + "=" + escape(value) +
";expires=" + expDate.toGMTString();
}
function loadMsg(msgClass) {
msg = document.getElementsByTagName("div");
for (i=0; i<msg.length; i++) {
if(msg[i].className == msgClass) {
if(document.cookie.indexOf(msg[i].id) == -1) {
msg[i].style.display = "block";
}
}
}
}
</script>
<style>
body {
font: small/1.2 Arial, Helvetica, sans-serif;
background-color: #eee; }
#wrap {
width: 40em;
margin: 0 auto;
padding: 3em 2em;
background-color: #fff;
border: 1px solid #ccc; }
/* These are the styles for the message box. */
.msgbox {
display: none;
position: absolute;
top: 15px;
right: 20px;
width: 20em;
background-color: #b00;
border: 1px solid #333;
color: #fff;
font-weight: bold; }
.msgbox p {
margin: 0;
padding: 5px 10px; }
.msgbox a.close {
float: right;
text-decoration: none;
font-weight: bold;
color: #333;
background-color: #fff;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
padding: 0 4px;
margin-left: 5px; }
</style>
</head>
<body onload="loadMsg('msgbox');">
<div id="message-1" class="msgbox">
<a href="#" class="close" onclick="closeBox('message-1'); return false;" title="Close This">X</a>
<p>This is a rather simple, easy-to-create CSS message box.</p>
<p>But the real kicker is the close button in the top right.
If you click it, the box will go away and won't return (even on refresh!).</p>
</div>
<div id="wrap">
<h1>Perma-Closing Message Boxes</h1>
<p><a href="#">Return to the original article.</a></p>
<p>A message box will pop up the first time you visit this page. When you close it, it won't return (assuming you have cookies and javascript enabled). Give it a try! If you want the message box back, you'll need to clear your browser's cookies.</p>
<p>Pellentesque sed arcu. Vestibulum vel ligula. Pellentesque dolor sapien, mollis vel, semper non, interdum non, urna. Sed quis tortor ut diam scelerisque congue. Aliquam sed purus. Nulla facilisi. Phasellus justo urna, lobortis at, hendrerit et, ultricies eget, odio. Nunc suscipit. Pellentesque ut dolor. Duis vitae purus. In congue mauris a sapien. In at turpis.</p>
<p>ras porta dapibus metus. Aenean posuere. Aliquam vitae enim vitae pede dapibus euismod. Duis tortor dolor, lacinia quis, iaculis vulputate, tempor vitae, libero. Sed adipiscing mattis nibh. Duis vel sapien eu velit eleifend tempor. Duis turpis odio, dapibus in, consectetuer in, facilisis sed, justo. Integer quis pede non erat hendrerit cursus.</p>
<p>Duis nulla. Aenean adipiscing interdum urna. Sed quam. Cras commodo velit vel turpis rutrum placerat. Phasellus tristique consectetuer nulla. Aliquam aliquam, pede et fringilla tincidunt, tellus sem gravida nibh, sit amet scelerisque lectus sapien sed neque. Nulla facilisi. Phasellus molestie auctor sem. Nunc venenatis.</p>
<p>Pellentesque commodo odio ac metus. Pellentesque nisl ipsum, ullamcorper imperdiet, faucibus quis, vestibulum sit amet, nunc. Curabitur quis eros. Maecenas at neque quis sapien hendrerit molestie. Maecenas iaculis, lectus eu volutpat volutpat, sapien turpis pharetra est, at tristique nisl sapien in diam.</p>
<p>Pellentesque sed arcu. Vestibulum vel ligula. Pellentesque dolor sapien, mollis vel, semper non, interdum non, urna. Sed quis tortor ut diam scelerisque congue. Aliquam sed purus. Nulla facilisi. Phasellus justo urna, lobortis at, hendrerit et, ultricies eget, odio. Nunc suscipit. Pellentesque ut dolor. Duis vitae purus. In congue mauris a sapien. In at turpis.</p>
<p>ras porta dapibus metus. Aenean posuere. Aliquam vitae enim vitae pede dapibus euismod. Duis tortor dolor, lacinia quis, iaculis vulputate, tempor vitae, libero. Sed adipiscing mattis nibh. Duis vel sapien eu velit eleifend tempor. Duis turpis odio, dapibus in, consectetuer in, facilisis sed, justo. Integer quis pede non erat hendrerit cursus.</p>
<p>Duis nulla. Aenean adipiscing interdum urna. Sed quam. Cras commodo velit vel turpis rutrum placerat. Phasellus tristique consectetuer nulla. Aliquam aliquam, pede et fringilla tincidunt, tellus sem gravida nibh, sit amet scelerisque lectus sapien sed neque. Nulla facilisi. Phasellus molestie auctor sem. Nunc venenatis.</p>
<p>Pellentesque commodo odio ac metus. Pellentesque nisl ipsum, ullamcorper imperdiet, faucibus quis, vestibulum sit amet, nunc. Curabitur quis eros. Maecenas at neque quis sapien hendrerit molestie. Maecenas iaculis, lectus eu volutpat volutpat, sapien turpis pharetra est, at tristique nisl sapien in diam.</p>
</div>
</body>
</html>