了解data-dismiss属性在Bootstrap中的工作原理

我是Bootstrap的新手，我遇到了这个例子的问题：

 Open Modal  
 
  
 
 × 
Modal Header
 
 
 
Some text in the modal.
 
 
 Close 
 
 
  

根据我的理解data-dismiss="modal"属性应该关闭模式，如果你点击它，但我不明白它是如何在幕后工作。 我检查了官方文档： http ： //getbootstrap.com/javascript/#modals-examples但是没有解释。

Answer 1

隐藏function以这种方式在modal.js中实现。

 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) 

基本上它只是找到具有data-dismiss属性和modal值的元素。 点击它会隐藏这些元素。

Answer 2

确切地在bootstrap.js找到具有属性data-dismiss="modal" this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))并触发this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))背后。 即它以更复杂的方式隐藏元素。

Answer 3

如果你在一个页面上使用多个模态同时在彼此之上打开，则使用data-dismiss="modal"最顶层将隐藏所有活动模态。