Added modal window option

Author: bjorn2404

css/map.css

@@ -135,6 +135,53 @@
 	height: 530px; 
 }
 
+/* Modal window */
+
+#overlay
+{
+     position: fixed;
+     left: 0px;
+     top: 0px;
+     width:100%;
+     height:100%;
+     z-index: 10000;
+     background: url(../images/overlay-bg.png) repeat;
+}
+
+#modal-window
+{
+	position: absolute;
+	left: 50%;
+    margin-left: -460px; /* width divided by 2 */
+    margin-top: 60px;
+    width: 920px;
+	height: 590px;
+	z-index: 10010;
+	background: #fff;
+	border-radius: 10px;
+	box-shadow: 0 0 10px #656565;
+}
+
+#modal-content
+{
+	float: left;
+	padding: 0 30px; /* there's already a margin on the top of the map-container div */
+}
+
+#close-icon
+{
+	position: absolute;
+	top: -6px;
+	right: -6px;
+	width: 18px;
+	height: 18px;
+	cursor: pointer;
+	background: #2c2c2c url(../images/close-icon.png) 3px 3px no-repeat;
+	border: 1px solid #000;
+	border-radius: 3px;
+	box-shadow: 0 0 3px #656565;
+}
+
 
 /* The following is for the geocode page and not the store locator */
 

images/close-icon.png

@@ -1,5 +1,5 @@
 /*
-* storeLocator v1.0.1 - jQuery store locator plugin
+* storeLocator v1.1.1 - jQuery store locator plugin
 * (c) Copyright 2012, Bjorn Holine (http://www.bjornblog.com)
 * Released under the MIT license
 * Distance calculation function by Chris Pietschmann: http://pietschsoft.com/post/2008/02/01/Calculate-Distance-Between-Geocodes-in-C-and-JavaScript.aspx
@@ -21,13 +21,22 @@ $.fn.storeLocator = function(options) {
       'listColor1'    : 'ffffff',
       'listColor2'    : 'eeeeee',
       'bounceMarker'  : true,
-      'slideMap'      : true
+      'slideMap'      : false,
+      'modalWindow'   : true
   }, options);
 
   return this.each(function() {
 
   var $this = $(this);
 
+  //Add modal window divs if set
+  if(settings.modalWindow == true)
+  {
+    $this.wrap('<div id="overlay"><div id="modal-window"><div id="modal-content">');
+    $('#modal-window').prepend('<div id="close-icon"><\/div>');
+    $('#overlay').hide();
+  }
+
   if(settings.slideMap == true)
   {
     //Let's hide the map container to begin
@@ -184,6 +193,29 @@ $.fn.storeLocator = function(options) {
                 //Slide in the map container
                 $this.slideDown();
               }
+              if(settings.modalWindow == true)
+              {
+                //Pop up the modal window
+                $('#overlay').fadeIn();
+                //Close modal when close icon is clicked
+                $(document).on('click', '#close-icon', function(){
+                    $('#overlay').hide();
+                });
+                //Close modal when background overlay is clicked
+                $(document).on('click', '#overlay', function(){
+                    $('#overlay').hide();
+                });
+                //Prevent clicks within the modal window from closing the entire thing
+                $(document).on('click', '#modal-window', function(e){
+                    e.stopPropagation();
+                });
+                //Close modal when escape key is pressed
+                $(document).keyup(function(e){
+                  if (e.keyCode == 27) { 
+                    $('#overlay').hide();
+                  }
+                });
+              }
               var map = new google.maps.Map(document.getElementById(settings.mapDiv),myOptions);      
               var markers = new Array();
               //Create one infowindow to fill later

images/overlay-bg.png

@@ -8,6 +8,10 @@ A note on the distance calculation: this plugin currently uses a distance functi
 
 ## Changelog
 
+### Version 1.1.1
+
+Added a modal window option. Set slideMap to false and modalWindow to true to use it. Also started using the new [jQuery .on() event api](http://blog.jquery.com/2011/11/03/jquery-1-7-released/) - make sure you're using jQuery v1.7+ or this won't work.
+
 ### Version 1.0.1
 
 Left a couple of console.logs in my code, which was causing IE to hang.