Here is the freebie from MediaLoot, which is a set of coded and ready-to-use stunning modal web popup boxes using HTML/CSS. Included in the download are all necessary HTML, CSS, and image files including sample code and demonstrations (jQuery is used via Google API). Also included is a layered .psd file for easy customization.
These web boxes are fast to implement using HTML/CSS, easy to customize using the included Photoshop files, and are perfect for variety of interface and marketing applications.
Screenshots
Use these Modal Web Boxes on your site to easily add a warning, notification, or collect information.
How to Get Started?
1. Link to your current jQuery library or link to the Google jQuery library from within the <head> of the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
2. Either copy and paste the contents of the styles.css sheet or upload styles.css and add this code to theof the page (making sure to update the relative link to be in the right location):
<link rel="stylesheet" type="text/css" href="styles.css" />
3. Copy all of the images from the included images folder and add them to an images folder on your site (or any directory of your choosing).
4. Copy the html of modal box you’d like to use, beginning with the div that has the “modal-box” class and ending with the closing tag for that div:
<div id="warning"><div> <img src="images/warning.png" /> <h3>Oops! There's been a problem.</h3> <p>Sorry, but we don't appear to be able to do what you asked. Please submit a bug report.</p> <span><span>Dismiss</span></span> <a href=""><span>Send Bug Report</span></a> </div></div>
5. Add something that will trigger the modal box to pop-up. In our case, we created a span. Change the rel attribute to have the id of the modal div you want to be triggered:
<span rel="#warning"><span>Show Warning Box</span></span>
6. Add some javascript to yourtag – after calling the jQuery library:
<script type="text/javascript">
$(document).ready( function(){
// Hide all Modal Boxes
$('div.modal-box').hide();
// Display appropriate box on click - adjust this as required for your website
$('span.modal-link').click(function() {
var modalBox = $(this).attr('rel');
$('div'+modalBox).fadeIn('slow');
});
// Multiple ways to close a Modal Box
$('span.modal-close').click(function() {
$(this).parents('div.modal-box').fadeOut('slow');
});
$('span.dismiss').click(function() {
$(this).parents('div.modal-box').fadeOut('slow');
});
$('span.save').click(function() {
// **** If you need to save or submit information - add your appropriate ajax code here
$(this).parents('div.modal-box').fadeOut('slow');
});
});
</script>
7. Now, when you click on that span that says Show Warning Box, the associated warning box should appear. Be sure to update the jQuery scripts to work for your specific needs. For example, you may want a specific box to display on load instead of on a click. You can consult the full jQuery documentation to adapt the code to your exact needs.
Customization
We’ve coded these Modal Web Boxes to be as customizable as possible. Please take a look at the styles.css sheet to see that you may change the width and height of the boxes as well as the style of the buttons.
Source : Medialoot
Wow. These are super!! Thanks!!!
How a simple box with some contents will appear upon clicking on a link
http://jqueryui.com/demos/dialog/
Here is the link where you will find the nice plugin for simple popup after clicking on the link.