Specify modal selector in data attribute with backward compatibility

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,21 @@ 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>
+
+{% highlight html %}
+<a href="#" class="btn" href="#myModalExample">Open modal</a>
+<div id="myModalexample" class="modal">
+  <header class="bar bar-nav">
+    <a class="icon icon-close pull-right" href="#myModalexample"></a>
+    <h1 class="title">Modal</h1>
+  </header>
+
+  <div class="content">
+    <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
+  </div>
+</div>
+{% endhighlight %}
 
   </article>
 

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);
+      }
+      if (modalToggle.hash) {
+        try {
+          return document.querySelector(modalToggle.hash);
+        }
+        catch (error) {
+          if (error.name !== 'SyntaxError') {
+            throw error;
+          }
+        }
+      }
     }
   };