I believe you're talking about a "popup" that is more of a modal window then a true popup. This would mean creating a div that is positioned above the page and floats over everything else.
Here's a quick example of how you could do this with jQuery and CSS.
The fixed positioning is solved thanks to an example by stu nicholls at
CSS Play. This should leave the div fixed so that it doesnt scroll with the page even on IE 6. IT fades in when the page loads and it fades out when its clicked.
Please don't hesitate to ask any questions if it doesn't make sense.
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Make the notice DIV display on page load
$('#notice').fadeIn(1500);
//Register a click event on the DIV[id=notice] and make it fade out.
$('#notice').click( function() {
$(this).fadeOut(1500);
});
});
</script>
<style>
#notice {display:block; top:200px; left:200px; height:110px; width:276px; position:fixed; border:2px solid black; padding:10px; z-index:1000; background-color:white; display:none;}
* html #notice {position:absolute;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="notice">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</div>
<!-- write out 10 paragraphs to keep code short -->
<!-- there is no other reason to do it this way -->
<script type="text/javascript">
for( i=0; i<10; i++)
{
document.write('<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida lorem ac mi. Morbi non risus vel mi convallis iaculis. Integer ac elit id mi venenatis fringilla. Aliquam aliquet varius nisi. Proin pellentesque risus ac turpis. Nam vestibulum semper mauris. Nullam fermentum, felis sed sagittis volutpat, purus nisl aliquet enim, sit amet blandit mauris lectus eget nisl. Nullam purus erat, consectetur vitae, auctor eget, euismod sed, elit. Vivamus nec tortor a mauris suscipit viverra. Nam malesuada. Ut porta mattis felis. Aenean sed felis. Suspendisse viverra varius arcu. Nunc felis. Donec eget sem in eros rutrum commodo. Vivamus sagittis. Aliquam erat volutpat. </p> ');
}
</script>
</body>
</html>
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
Offline 624 posts
since Jul 2008
Unsolved 
