Restricted Content

This content is protected. Please sign up for an account to get access.

Let me in!

Modal Web Boxes

Examples

Click on the following to pop-up the appropriate boxes:

Show Free Download Box
Show Mailing List Box
Show Restricted Content Box
Show Heart Favorites Box
Show Star Favorites Box
Show Adjust Settings Box
Show Warning Box
Show Stop Box

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 the <head> of 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" class="modal-box wrapper"><div class="inside light-yellow">
    
			<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 class="button white dismiss"><span>Dismiss</span></span>
    
			<a href="" class="button yellow"><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" class="modal-link"><span>Show Warning Box</span></span>>
  6. Add some javascript to your <head> tag - 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.