under LGPL License
It works well under IE8, Firefox, Google Chrome. The code is as below, or download the code directly from floatbox v1.0
<head>
<title>Coolder.com</title>
<script type=”text/javascript” src=”./fancybox/jquery-1.4.2.min.js”></script>
<style type=”text/css”>
#message_box {
position: absolute;
display: none;
z-index: 10;
background:#ffc;
padding:5px;
text-align:center;
width:100px;;
border: 1px solid #D2D2D2;
-moz-box-shadow: 0 0 30px #CCC;
-webkit-box-shadow: 0 0 30px #CCC;
box-shadow: 0 0 30px #CCC;
background: #FFF;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 15px);
}
</style>
</head>
<body onload=”init1()”>
<div id=”message_box”>
<img id=”close_message” style=”float:right; cursor:pointer” src=”pics/makingface.gif” title=”click here to close” />
<a href=”<a href=”http://www.coolder.com/gallery”>http://www.coolder.com/gallery”><font style=”font-size:12px;”>click here, you can’t miss it</font></a>
</div>
</body>
<script type=”text/javascript”>
$(window).scroll(function() {
$(‘#message_box’).css(“top”,$(window).height()+$(window).scrollTop()-120 +”px”);
$(‘#message_box’).css(“left”,$(window).width()+$(window).scrollLeft() -145 +”px”);});
$(window).resize(function() {
$(‘#message_box’).css(“top”,$(window).height()-120 +”px”);
$(‘#message_box’).css(“left”,$(window).width()-145 +”px”);});
$(‘#close_message’).click(function(){
$(‘#message_box’).animate({ top:”+=15px”,opacity:0 }, “slow”);});
function init1() {
$(‘#message_box’).css(“top”,$(window).height()-120 +”px”);
$(‘#message_box’).css(“left”,$(window).width()-145 +”px”);
$(‘#message_box’).css(“display”,”block”);};
</script>