Feb
15
2010

Easy Overlay Modal Window jQuery Plugin

by   |  Posted in Downloads  |  15 comments

I developed the following jQuery plugin for the Design options admin panel of Magazine Premium. All it needed to do is display an example of all of the @font-face kits that are available with the theme. It is pretty simple and just fades in a centered modal window containing an image when you click on a link.

There are just a few things you need to put in place in order to get it working. First, there is the plugin iteself.

Here is the jQuery code:

(function($) {
  $.fn.easyOverlay = function(){	
    $(this).click(function(e){
      if($("#easyOverlay")) { $("#easyOverlay").remove(); }
      $("body").append("<p id='easyOverlay'><a href='javascript:void(0)' class='closeit'>X</a></p>");
      $("<img src='"+ this.rel +"' alt='' />").appendTo('#easyOverlay').load(function() {
        var wide = ($(window).width() / 2) - ($(this).width() / 2);
        var high = ($(window).height() / 2) - ($(this).height() / 2);			
	var scrollTop = $(window).scrollTop();
        $("#easyOverlay").css({
          top: high + scrollTop + "px",
          left: wide + "px",
		  display: 'none',
          visibility: "visible"
        }).fadeIn();
      });
    });
    $("a.closeit").live("click", function(){
      $("#easyOverlay").fadeOut();
    });
  };
})(jQuery)

Here is the CSS you need:

#easyOverlay{
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  visibility: hidden;
  top: 0;
  color:#fff;
  z-index: 1000;
}
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
}

You can easily change some of the design CSS elements but a few thins need to stay in place to make it work. Don’t change the following styles:

#easyOverlay{
  position:absolute;
  visibility: hidden;
  top: 0;
  z-index: 1000;
  }
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
  }

Now comes the HTML markup:

<a href="javascript:void(0)" class="screenshot" rel="link-to-your-image.jpg">Name of Image</a>

To call the plugin all you need to do is this:

$(document).ready(function() {
  $(".screenshot").easyOverlay();
});

There aren’t any options so all you pretty much get is a centered modal window that fades in when you click the link, and fades out when you click the X.

Test it out below:

Adler  |  Chunkfive  |  Galatia  |  Riesling

All the images used were provided by Font Squirrel.

Download

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.
If you require help or support, please visit the Support Forum and ask all your questions there. Questions about themes or plugins posted in the comments below will not be answered.

Tags: , , , , , , , , , , , , , , , , ,

Short URL: http://bit.ly/ch8WJ3

Discussion 15 Comments

  1. Norberto Dekok on April 5, 2010 at 9:54 pm

    Hey, I am checking this site from my iPhone and it looks kinda funky. Thought you’d want to know. It’s a great post though, didn’t mess that up :)

  2. marathons on April 21, 2010 at 7:48 pm

    You guys who create these plugins are pretty amazing. I don’t know if I could do this type of thing if my life depended on it.

  3. Bootcamp on April 21, 2010 at 10:27 pm

    This is a response to Noberto’s comment – The iPhone can have a tendency to muck up the way a site looks so there is something that can be done to optimize and there is a free plugin called ‘WPtouch iPhone Theme’ which can be added right from WordPress. It makes a few changes that only affect the way the site looks on an iPhone so that it looks the way it should.

    and cool Plugin you created here, thanks for posting this!

  4. daniel on June 12, 2010 at 7:01 pm

    hello guys ….how should i do it if i want to run the modal window with “onload” from the body. thaks!!

  5. steve on July 20, 2010 at 12:11 pm

    Great post! The script is small and easy to use. Just one correction: the window is not modal. Modal means that the user input is blocked from all other elements of the page(form/screen) that are outside of the modal frame for as long as modal frame is visible. This scrip provides no blocking overlay, and user is free to click anything else on the page. Otherwise it’a a very nice script. Thanks!

  6. Joy R on August 6, 2010 at 12:21 am

    Help, please! How do I use this in blogger?

  7. Jerry garcia tie on August 26, 2010 at 11:45 am

    Please,help me! How do I use this in blogger? Big thanks for you help!

    • c.bavota on August 26, 2010 at 5:22 pm

      Blogger is pretty strict about what you can actually add to it, and I am not a Blogger expert so I really couldn’t help you.

  8. dhanesh mane on September 21, 2010 at 8:49 am

    hey thanks for sharing such a nice code. I found this as easiest method to implement the overlays with jQuery.

  9. Minneapolis Electricians on December 4, 2010 at 8:08 am

    Yeah I agree with dhanesh mane this is a easiest way to implement the overlays with jQuery. Thanks for sharing such a nice plugin as well coding, it’s really helpful

  10. Tarot on December 10, 2010 at 8:44 am

    This plugin is very helpful.

    Thanks a lot

  11. php freelancer on January 6, 2011 at 12:09 pm

    yes a really help ful pluging and I am using it in lots of my websites. thxx a lot.

  12. Mike Bundrant on January 8, 2011 at 2:38 am

    Hi thanks yes how to apply to blogger..?

  13. Juegos on January 12, 2011 at 6:03 am

    Great plugin just what I need.

  14. web design uae on April 28, 2011 at 1:59 am

    Easy Overlay Modal Window jQuery Plugin – Thanks for the plugin.I have just started a blog with lots of plugins and I think I may use this is my blog.