(function($){ $.fn.extend({ modalPanel: function() { //Our function for hiding the modalbox function modalHide() { $(document).unbind("keydown", handleEscape); var remove = function() { $(this).remove(); }; overlay.fadeOut(remove); modalWindow .fadeOut(remove) .empty(); } //Our function that listens for escape key. function handleEscape(e) { if (e.keyCode == 27) { modalHide(); } } //Create our overlay object var overlay = $(""); //Create our modal window var modalWindow = $(""); return this.each(function() { //Listen for clicks on objects passed to the plugin $(this).click(function(e) { if (typeof document.body.style.maxHeight === "undefined") { //if IE 6 $("body","html").css({height: "100%", width: "100%"}); } //Append the overlay to the document body $("body").append(overlay.click(function() { modalHide(); })); //Add a loader to our page $("body").append(""); //Set the css and fade in our overlay overlay.css("opacity", 0.8); overlay.show(); //Prevent the anchor link from loading e.preventDefault(); //Activate a listener $(document).keydown(handleEscape); //Load the image var img = new Image(); $(img).load(function () { var imageWidth = img.width / 2; var imageHeight = img.height / 2; modalWindow.css({ "margin-left": -imageWidth }); if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6 modalWindow.css({ "margin-top": -imageHeight }); } $("#modal-load").remove(); modalWindow.append(img); $(this).addClass("modal-image"); $("body").append(modalWindow); modalWindow.fadeIn(50); }) .attr({ src: this.href }).click(function() { modalHide(); }); }); }); } }); })(jQuery); $(function() { $('a[rel*=modalPanel]').modalPanel(); });