Specify modal selector in data attribute with backward compatibility.juriejan-modal-selector-attribute

2 files changed, 20 insertions, 5 deletions

diff --git a/docs/components.html b/docs/components.html
index 476ddc1..b8d3edb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1107,7 +1107,7 @@ document
     <h3 class="component-title">Modals</h3>
 
     <div class="component-example">
-      <a href="#myModalexample" class="btn">Open modal</a>
+      <a href="#" class="btn" data-modal="myModalExample">Open modal</a>
       <div id="myModalexample" class="modal">
         <header class="bar bar-nav">
           <a class="icon icon-close pull-right" href="#myModalexample"></a>
@@ -1118,8 +1118,10 @@ document
       </div>
     </div>
 
+    <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle link's data-modal attribute to a selector that will produce the desired modal.</p>
+
 {% highlight html %}
-<a href="#myModalexample" class="btn">Open modal</a>
+<a href="#" class="btn" data-modal="#myModalExample">Open modal</a>
 <div id="myModalexample" class="modal">
   <header class="bar bar-nav">
     <a class="icon icon-close pull-right" href="#myModalexample"></a>
@@ -1132,7 +1134,7 @@ document
 </div>
 {% endhighlight %}
 
-    <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
+    <p class="component-description">DEPRECATED: Alternatively you can specify the selector of the desired modal in the href attribute of the link. This will fail without a warning if a modal is not found.</p>
 
   </article>
 
diff --git a/js/modals.js b/js/modals.js
index 21bc112..92abf97 100644
--- a/js/modals.js
+++ b/js/modals.js
@@ -32,8 +32,21 @@
 
   var getModal = function (event) {
     var modalToggle = findModals(event.target);
-    if (modalToggle && modalToggle.hash) {
-      return document.querySelector(modalToggle.hash);
+    if (modalToggle) {
+      var modalSelector = modalToggle.getAttribute('data-modal');
+      if (modalSelector) {
+        return document.querySelector(modalSelector);
+      }
+      else if (modalToggle.hash) {
+        try {
+          return document.querySelector(modalToggle.hash);
+        }
+        catch (error) {
+          if (error.name !== 'SyntaxError') {
+            throw error;
+          }
+        }
+      }
     }
   };