Easy Overlay Modal Window jQuery Plugin

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("

X

"); $("").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:

Name of Image

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.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie