Close popdown when user clicks outside of the container

lib/jquery.popdown.js

@@ -9,7 +9,7 @@
  * @version  : 1.0
  */
 ;(function($){
-	
+
 	/**
 	 * Generate & display the popdown
 	 *
@@ -18,12 +18,12 @@
 	 * @return void
 	 */
 	$.fn.show_popdown = function(uri, options) {
-		
+
 		// Remove previous containers if they exist
 		if($('#popdown-opacity').length > 0) {
 			$('#popdown-opacity').remove();
 		}
-		
+
 		// Construct the background blend
 		opacity = $('<div />').attr('id', 'popdown-opacity').css({
 			position: 'absolute',
@@ -50,16 +50,16 @@
 
 		// Fade in the background blend & add content container
 		$('#popdown-opacity').fadeIn(100).append(container);
-		
+
 		// Fade in the container and load the data
 		$('#popdown-opacity').append(container).stop().animate({
 			opacity: 1.0
 		}, 100, function() {
 			$('#popdown-dialog').fadeIn(50, function(){
-				$.get(uri, function(resp) {	
-					$('#popdown-dialog').html(resp).addClass('popdown-done').removeClass('popdown-loading');					
-					$("html, body").animate({ scrollTop: 0 }, "fast");					
-				});				
+				$.get(uri, function(resp) {
+					$('#popdown-dialog').html(resp).addClass('popdown-done').removeClass('popdown-loading');
+					$("html, body").animate({ scrollTop: 0 }, "fast");
+				});
 			});
 		});
 	}
@@ -76,16 +76,16 @@
 				height:0
 			}, 200, function(){
 				$('#popdown-opacity').remove();
-			});			
-		}		
+			});
+		}
 	}
 
 	/**
 	 * Initialize the popdown plugin
 	 *
 	 * @return void
 	 */
-	$.fn.popdown = function(options) {  
+	$.fn.popdown = function(options) {
 
 		var defaults = {
 			width :610,
@@ -101,31 +101,40 @@
 					width : $(document).outerWidth(),
 					height: $(document).outerHeight()
 				});
-			}		
-		});		
+			}
+		});
 
 		// Bind the document ESC key
 		$(document).keyup(function(e){
 			if(e.keyCode === 27) {
 				$.fn.close_popdown();
 			}
 		});
-		
+
 		// General element to close the popdown
 		$(document).on('click', '.close-popdown', function(e){
 			if(!$(this).is('.close-popdown'))  {	 //Only close when someone click on the html element with close-popdown class
 				e.preventDefault();
 			}
 			$.fn.close_popdown();
 		});
-
+
+		// Close popdown when user clicks outside its container
+		$(document).click(function(event) {
+	    if(!$(event.target).closest('#popdown-dialog').length) {
+        if($('#popdown-dialog').is(":visible")) {
+          $.fn.close_popdown();
+        }
+	    }
+		});
+
 		// Bind to each matching element
-		return this.each(function() {  
+		return this.each(function() {
 
 			var self = $(this);
 
 			self.bind('click', function(e){
-				
+
 				if(self.is('a')) {
 					e.preventDefault();
 				}
@@ -142,6 +151,6 @@
 					}
 				}
 			});
-		}); 		
-	};  	
+		});
+	};
 })(jQuery);