git.fiddlerwoaroof.com
Browse code

Allow only one modal at a time

fiddlerwoaroof authored on 01/07/2015 00:36:17
Showing 3 changed files
css/myjQModal.css
History View file @ 802636f
... ... 
@@ -31,6 +31,5 @@
31 31 
   position: relative;
32 32 
   width: 100%;
33 33 
   height: 100%;
34 
-  padding: 1em;
35 34 
   background: white;
36 35 
 }
index.html
History View file @ 802636f
... ... 
@@ -9,13 +9,14 @@
9 9 
   </head>
10 10 
   <body>
11 11 
     <div id="background"></div>
12 
-    <button data-action="open" data-target="#modal">Show!</button>
12 
+    <button  data-action="open" data-target="#modal"> open modal! </button>
13 
+    <div id="modal">
14 
+      <button  data-action="open" data-target="#modal2"> open modal! </button>
15 
+      Howdy!
16 
+    </div>
17 
+    <div id="modal2">
18 
+      This is the second modal!
19 
+    </div>
13 20
14 
-      <div id="modal">
15 
-        Howdy!
16 
-        <form action='#'>
17 
-          <input name="text" type="text">
18 
-          <input type="submit">
19 
-      </div>
20 21 
   </body>
21 22 
 </html>
js/myjQModal.jquery.js
History View file @ 802636f
... ... 
@@ -3,6 +3,7 @@
3 3 
   $.fn.myjQModal = function() {
4 4 
     'use strict';
5 5 
     var self=this;
6 
+    var currentModal = null;
6 7 
     $(self).each(function() {
7 8 
       var target = $(this.dataset.target);
8 9 
       var action = this.dataset.action;
... ... 
@@ -15,14 +16,22 @@
15 16 
         $('body').append(wrapper);
16 17 
         wrapper.click(function() {
17 18 
           wrapper.removeClass('open');
19 
+          currentModal = null;
18 20 
         });
19 21 
         modal.click(function(ev) {
20 22 
           ev.stopPropagation();
21 23 
         });
22 24 
       }
23 25 
       $(this).click(function() {
24 
-        if (action === 'open') { wrapper.addClass('open'); }
25 
-        else if (action === 'close') {wrapper.removeClass('open'); }
26 
+        if (action === 'open') {
27 
+          if (currentModal !== null) { currentModal.removeClass('open'); }
28 
+          wrapper.addClass('open');
29 
+          currentModal = wrapper;
30 
+        }
31 
+        else if (action === 'close') {
32 
+          currentModal = null;
33 
+          wrapper.removeClass('open');
34 
+        }
26 35 
       });
27 36 
     });
28 37 
     return this;