CSS Codes
CSS Layouts

<html>
<head>
<link rel="stylesheet" href="dropincontentbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dropincontentbox.js">

/***********************************************
* Drop In Content Box (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop in box to style it
showduration:10, //disappear after x seconds?
freq:'session'
})

var dropinbox2=new dropincontentbox({
source:'#reminder', //#id of DIV to show if defined inline
cssclass:'dropinbox dropinboxaltstyle',
fx:'easeInExpo', //alternate drop animation keyword
pos:[-20, -50], //custom position of drop in box
deferred:1 //show box 1 sec after page has loaded
})

</script>
</head>

<body>

<div id="reminder">
This content of this drop in box is defined inline on the page, inside the DIV with id="reminder" This DIV is dropped down using the "easeInExpo" animation option. The box will not automatically disappear until the user explicitly clicks on the "close" button or by calling the user function dropinstance.hide().
</div>

<a href="javascript:dropinbox2.show()">Show Reminder box again</a> | <a href="javascript:dropinbox2.hide()">Hide Reminder Box</a>

</body>
</html>