Javascript 了解数据解除属性在 Bootstrap 中的工作原理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34627271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding how data-dismiss attribute works in Bootstrap
提问by Tien Nguyen
I'm new to Bootstrap and i'm facing problem with this example:
我是 Bootstrap 的新手，我在这个例子中遇到了问题：
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As per my understanding data-dismiss="modal"attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examplesbut there's no explaination.
根据我的理解data-dismiss="modal"，如果单击它，属性应该关闭模态，但我不明白它在幕后是如何工作的。我查看了官方文档：http: //getbootstrap.com/javascript/#modals-examples但没有解释。
回答by Adeel
The hiding functionality is implemented in the modal.jsin this way.
隐藏功能modal.js以这种方式实现。
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismissand the value of modal. Upon click it will hide these elements.
基本上它只是找到具有属性data-dismiss和值的元素modal。单击后，它将隐藏这些元素。
回答by Atikur Rahman
exactly in bootstrap.jsfind the element with attribute data-dismiss="modal"and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))behind. i.e. it hides the element but in more complex way.
正好在bootstrap.js找到后面有属性data-dismiss="modal"和触发器的元素this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))。即它隐藏元素，但以更复杂的方式。
回答by Grigor IWT
If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal"will hide all active modals.
如果您在一个页面上使用多个模态同时打开，则关闭最上面的data-dismiss="modal"将隐藏所有活动的模态。
