Understanding how data-dismiss attribute works in Bootstrap

nbnkbykc 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(5)|浏览(135)

我是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">&times;</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>

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/34627271/understanding-how-data-dismiss-attribute-works-in-bootstrap

5条答案

按热度按时间

gg0vcinb1#

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

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

基本上，它只是找到属性为data-dismiss且值为modal的元素。单击后，它将隐藏这些元素。

赞(0）回复(0）举报 2022-12-08

wwtsj6pe2#

将data-dismiss="modal"替换为：onclick="$('#modal_id').modal('hide');"
你应该有这样的东西：

<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">

onclick="$('#modal_id').modal('hide');"将仅关闭它所在的特定模态。
请注意，如果是，此答案是有用。

赞(0）回复(0）举报 2022-12-08

3gtaxfhh3#

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

赞(0）回复(0）举报 2022-12-08

epggiuax4#

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

赞(0）回复(0）举报 2022-12-08

q43xntqr5#

它大致相当于onclick="$(this).closest('.modal').modal('hide')"，也就是说，它在DOM中向上搜索.modal（意味着对话框本身的定义）并隐藏它。对话框的DOM不会被删除。

赞(0）回复(0）举报 2022-12-08