Features and fixes

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 = $("<div id='lean_overlay'></div>");
-
-            $("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 =
+                    $('<div id="lean_overlay"></div>')
+                    .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);