jQuery Smart Modal

With recent projects I needed a flexible modal box. Most of the ones out there are either horribly bloated or only work for images, which really sucks when you want a form inside one.

Easy answer, make my own… Here it is. By the way, the minimised version in under 2k with a tiny 1k stylesheet.

It works for images and other containing elements. Here are the examples:

Show on body load…

This is the really, really annoying type of modal box that loads as the page does. It also runs of this link.

ON BODY LOAD

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('a.on_load_modal').smart_modal();
    jQuery('a.on_load_modal').smart_modal_show();
  });
  </script>

Simple Image Modals

Click on an image to get a pop up bigger version of it.

This is about as simple as it gets; give the anchor tag a href for the bigger version of the image and it just works.

With the a tag having a title attribute this is then used by the modal pop up as the title of the big image.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('a.modal1').smart_modal();
  });
  </script>

Div Modal

Instead of clicking on an anchor tag, click on the div below and you get a modal box containing the same html.

Click Me

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal2').smart_modal();
  });
  </script>

Using the rel Attribute

Click me and instead of an image you will get the content of a hidden div with a class or id that matches the rel.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal3').smart_modal();
  });
  </script>

Show and Hide Functions

Click me and you will get a modal box followed some javascript alerts on show, then on close.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal4').smart_modal({
      show:function(){alert('This happens on show!');}, 
      hide:function(){alert('On Hide!');} 
    });
  });
  </script>

Custom Close Links

The extra close link inside the modal will also close the box. This done by simply giving it a class of ‘sm_close’ as the plugin looks for clicks on .smart_modal_close inside the overlay to close it.

Click me and you will get a bunch of text.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal5').smart_modal();
  });
  </script>

Disabling the Overlay Click to close

As with all modal boxes you get a blackened background known as an ‘overlay’, normally clicking on that will also close the modal. But not in this example! Now you can only click on the x (or any other element with class of ‘modal_close’) to close it.

Click me and you will get a tiny thumbnail of Fort Dunlop.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal7').smart_modal({hide_on_overlay_click:false});	
  });
  </script>