diff --git a/jquery.leanModal.js b/jquery.leanModal.js index facf07e..cb3130f 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -1,73 +1,72 @@ (function($){ - - $.fn.extend({ - + $.fn.extend({ leanModal: function(options) { - var defaults = { top: 100, overlay: 0.5, - closeButton: null + closeButton: null, + closeOnBlur: true, + overlayColor: '#000' } - - var overlay = $("
"); - - $("body").append(overlay); - options = $.extend(defaults, options); - + return this.each(function() { - - var o = options; - - $(this).click(function(e) { - - var modal_id = $(this).attr("href"); - $("#lean_overlay").click(function() { - close_modal(modal_id); - }); - - $(o.closeButton).click(function() { - close_modal(modal_id); - }); - - var modal_height = $(modal_id).outerHeight(); - var modal_width = $(modal_id).outerWidth(); + function closeModal(modalId){ + $overlay.fadeOut(200); + $(modalId).hide(); + } - $('#lean_overlay').css({ 'display' : 'block', opacity : 0 }); + var o = options; - $('#lean_overlay').fadeTo(200,o.overlay); + var $overlay = + $('') + .css({ + 'position': 'fixed', + 'z-index': '100', + 'top': '0px', + 'left': '0px', + 'height': '100%', + 'width': '100%', + 'background': o.overlayColor, + 'display': 'none'}) + .appendTo($('body')); - $(modal_id).css({ - - 'display' : 'block', - 'position' : 'fixed', - 'opacity' : 0, - 'z-index': 11000, - 'left' : 50 + '%', - 'margin-left' : -(modal_width/2) + "px", - 'top' : o.top + "px" - - }); + $(this).click(function(e) { + var modalId = $(this).attr('href'); - $(modal_id).fadeTo(200,1); + // If there is no close button, we discard the "closeOnblur" setting, + // or otherwise it will be impossible to close the overlay. + if (o.closeOnBlur || !o.closeButton) { + $overlay.click(function() { + closeModal(modalId); + }); + } + $(o.closeButton).click(function() { + closeModal(modalId); + }); - e.preventDefault(); - - }); - - }); + $overlay + .css({ opacity: 0 }) + .show() + .fadeTo(200, o.overlay); - function close_modal(modal_id){ + var $modalId = $(modalId); + $modalId.css({ + 'display' : 'block', + 'position' : 'fixed', + 'opacity' : 0, + 'z-index': 11000, + 'left' : 50 + '%', + 'margin-left' : -($modalId.outerWidth() / 2) + 'px', + 'top' : o.top + }); - $("#lean_overlay").fadeOut(200); + $(modalId).fadeTo(200, 1); - $(modal_id).css({ 'display' : 'none' }); - - } - + e.preventDefault(); + }); + }); } }); - })(jQuery); \ No newline at end of file diff --git a/jquery.leanModal.min.js b/jquery.leanModal.min.js new file mode 100644 index 0000000..f9b225a --- /dev/null +++ b/jquery.leanModal.min.js @@ -0,0 +1 @@ +!function(a){a.fn.extend({leanModal:function(b){var c={top:100,overlay:.5,closeButton:null,closeOnBlur:!0,overlayColor:"#000"};return b=a.extend(c,b),this.each(function(){function c(b){e.fadeOut(200),a(b).hide()}var d=b,e=a('').css({position:"fixed","z-index":"100",top:"0px",left:"0px",height:"100%",width:"100%",background:d.overlayColor,display:"none"}).appendTo(a("body"));a(this).click(function(b){var f=a(this).attr("href");(d.closeOnBlur||!d.closeButton)&&e.click(function(){c(f)}),a(d.closeButton).click(function(){c(f)}),e.css({opacity:0}).show().fadeTo(200,d.overlay);var g=a(f);g.css({display:"block",position:"fixed",opacity:0,"z-index":11e3,left:"50%","margin-left":-(g.outerWidth()/2)+"px",top:d.top}),a(f).fadeTo(200,1),b.preventDefault()})})}})}(jQuery); \ No newline at end of file