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("<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.
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
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.
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!
hello guys ….how should i do it if i want to run the modal window with “onload” from the body. thaks!!
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!
Help, please! How do I use this in blogger?
Please,help me! How do I use this in blogger? Big thanks for you help!
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.