提交 e2cf27cf 编写于 作者: J Jurie-Jan Botha 提交者: XhmikosR

Specify modal selector in data attribute with backward compatibility.

上级 d0be556c
......@@ -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>
......
......@@ -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;
}
}
}
}
};
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册