diff options
-rw-r--r-- | docs/components.html | 8 | ||||
-rw-r--r-- | js/modals.js | 17 |
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; + } + } + } } }; |