1.1.0 Update with alots of refactoring and speed optimizations.

msigley · Jun 30, 2014 · 46bf7b2 · 46bf7b2
1 parent 02871ac
commit 46bf7b2
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,30 @@
-jquery-chaos-modal
+jQuery Chaos Modal
 ==================
 
-A Simple yet extendable jQuery modal script built for use with inline HTML and forms in mind.
+A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images in mind.
+
+There are many other modal plugins out there. The goal of this project is to make one that is dead simple to use and implement, while still allowing for easy customization.
+
+Example Usage
+-------------
+
+```
+<html>
+	<head>
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<script src="jquery-modal.js" />
+	</head>
+	<body>
+		<h1>jQuery Chaos Modal Examples</h1>
+		<h2>Image modals</h2>
+		<a href="test_image.png" class="chaos-modal-link"><img src="test_image.png" /></a>
+		<h2>Html Content Modals</h2>
+		<div class="content-wrap">
+			<a href="#" class="chaos-modal-link">Click Here to open the modal</a>
+			<div class="chaos-modal-box">
+				All HTML in here is used as the modal's content.
+			</div>
+		</div>
+	</body>
+</html>
+```
diff --git a/jquery-modal.js b/jquery-modal.js
@@ -1,36 +1,52 @@
 /*
  * jQuery Chaos Modal
  * By Matthew Sigley
- * Based on work by Kevin Liew - http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
- * Version 20120514
+ * Based on concept work by Kevin Liew - http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
+ * Version 1.1.0
  * Recent changes:
+ * - Added maxWidth parameter to openModal function (1.1.0)
+ * - Added automatic modal binding to .chaos-modal-link elements (1.1.0)
+ * - Added option to close the modal when the mask is clicked or the ESC key is pressed (1.1.0)
+ * - Reworked references to optimize javascript caching (1.1.0)
+ * - Added option to openModal to close the modal on mask click
  * - Clones content container and appends to body for absolute positioning relative to body
  * - Added max width variable so you can keep modal content inside your wrapper div's width
  * Things left to do:
  * -Jquery animation queue integration
  * -Function parameters for changing the default CSS styles
  * -Change namespacing of functions to work similar to $('#example').modal("open")
- * -Add maxWidth parameter to openModal function
  * -Add position parameter to openModal function
  * -Update and test resizeModal function
  */
 
 (function( $ ) {
 	//Property to store the modal current being displayed
-	var currentModal;
-	var maxWidth = 960;
+	var currentModal,
+		maxWidth;
 
-	$.fn.openModal = function() {
+	$.fn.openModal = function( options ) {
+		//Default options
+		var defaults = { maskClose: true, maxWidth: 960 };
+		options = $.extend({}, defaults, options);
+
 		//Clone modal content
-		var clone = this.clone();
+		var clone = this.clone(),
+			bodyElement = $('body'),
+			documentElement = $(document),
+			windowElement = $(window),
+			maskClose = options['maskClose'];
+
+		//Update maxWidth
+		maxWidth = options['maxWidth'];
 
 		//Update currentModal
 		currentModal = clone;
+		clone.attr({id: 'chaos-current-modal'});
 
 		//Write the mask div
-		$('body').append('<div class="modal-mask"></div>');
-		$('body').children('.modal-mask').css({'position': 'absolute', 'z-index': '9000', 'background-color': '#000', 'display': 'none', 'top': '0', 'left': '0'});
-		$('body').append(clone);
+		var modalMask = $('<div id="chaos-modal-mask" class="chaos-modal-mask"></div>');
+		modalMask.css({'position': 'absolute', 'z-index': '9000', 'background-color': '#000', 'display': 'none', 'top': '0', 'left': '0'});
+		modalMask.appendTo(bodyElement);
 
 		//Write print link if none exist
 		if(clone.find('.print-link').length == 0) {
@@ -45,28 +61,28 @@
 			}
 
 		//Get the screen height and width
-		var maskHeight = $(document).height();
-		var maskWidth = $(window).width();
+		var maskHeight = documentElement.height();
+		var maskWidth = windowElement.width();
 
 		//Check for invalid mask dimensions
         if(maskHeight < clone.height()) { maskHeight = clone.height(); }
 
 		//Set height and width to mask to fill up the whole screen
-        $('body').children('.modal-mask').css({'width':maskWidth,'height':maskHeight});
+        modalMask.css({'width': maskWidth,'height': maskHeight});
 
-        //transition effect    
-        $('body').children('.modal-mask').fadeIn(1000);   
-        $('body').children('.modal-mask').fadeTo("slow",0.8); 
+        //Mask transition effect    
+        modalMask.fadeIn(1000);   
+        modalMask.fadeTo("slow",0.8); 
 
         //Get the window height and width
-        var winH = $(window).height();
-        var winW = $(window).width();
+        var winH = windowElement.height();
+        var winW = windowElement.width();
 
         //Set the popup window css
-        clone.css('position', 'absolute');
-       	clone.css('background', '#fff');
-       	clone.css('z-index', '9001');
-       	
+        clone.css({'display': 'block', 'position': 'absolute', 'background': '#fff', 'z-index': '9001', 'left': '-10000px'});
+        clone.appendTo(bodyElement);
+        clone.show();
+        
        	//Lock popup window width
        	if(clone.width() > maxWidth){
        		clone.width(maxWidth);
@@ -82,14 +98,14 @@
         if (modalLeft < 0) { modalLeft = 0; }
 
         //Set the popup window to center
-        clone.css('top', modalTop);
-        clone.css('left', modalLeft);
+        clone.hide();
+        clone.css({'top': modalTop, 'left': modalLeft});
 
         //transition effect
         clone.fadeIn(2000);
 
         //Bind the window resize event
-        $(window).bind('resize', resizeCurrentModal);
+        windowElement.bind('resize', resizeCurrentModal);
 
         //Bind the print link events if any close links exist
         if(clone.find('.print-link').length > 0) {
@@ -100,6 +116,12 @@
         if(clone.find('.close-link').length > 0) {
         	clone.find('.close-link').bind('click', closeCurrentModal);
         	}
+
+        //Bind close event to mask click and when the ESC key is pressed
+		if(maskClose) {
+			modalMask.on('click', closeCurrentModal);
+			documentElement.on('keyup', closeOnESC);
+		}
 
         return this;
 	};
@@ -120,7 +142,7 @@
 		this.hide().remove();
 
 		//Remove the mask div
-		$('body').children('.modal-mask').hide().remove();
+		$('body').children('.chaos-modal-mask').hide().remove();
 
 		return this;
 	};
@@ -170,4 +192,46 @@
 	function printCurrentModal() {
 		currentModal.printModal();
 	}
-})( jQuery );
+	function closeOnESC(e) {
+		if( e.which == 27 ) {
+			$(this).off('keyup', closeOnESC);
+			closeCurrentModal();
+		}
+	}
+})( jQuery );
+
+/* Create modal box clones and click events */
+jQuery(document).ready(function(){
+	$('.chaos-modal-link').each(function(index) {
+		var thisElement = $(this),
+			modalContent = thisElement.parent().find('.modal-box').first(),
+			modalContentClone = false;
+		//Check for pre-defined modal content
+		if( modalContent.length ) {
+			modalContentClone = modalContent.clone();
+			modalContent.remove();
+		} else {
+			//Check for single image inside of modal link
+			modalImage = thisElement.find('img');
+			if( modalImage.length == 1 )
+				modalContentClone = modalImage.clone();
+		}
+		//Setup event if content is available
+		if( modalContentClone ) {
+			//Assign unique ids to each modal link and content
+			thisElement.attr({
+				href: '#',
+				id: 'chaos-modal-link-'+index
+			});
+			modalContentClone.attr({
+				id: 'chaos-modal-box-'+index
+			});
+			modalContentClone.hide();
+			//Append hidden modal content to body
+			modalContentClone.appendTo('body');
+			thisElement.click(function() {
+				modalContentClone.openModal();
+			});
+		}
+	});
+});