javascript - 单击按钮时防止 Bootstrap 模式打开

Question

我有一个包含多个 Bootstrap 模式的页面:

data-toggle="modal" data-target="#modal-12345"

问题是，我有一个可点击的整个表格行，比如

<tr data-toggle="modal" data-target="#modal-12345">

模态内容位于正下方的另一个隐藏表格行中，然后是下一个可点击行，依此类推。现在，该行还包含一个按钮，单击该按钮将转到另一个页面。

我需要整行都可以点击，这样它就可以打开模态框，除非单击转到另一页的按钮，然后我需要停止打开模态框。

我需要这样的东西

<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>

但是针对这个:

data-toggle="modal"

我还尝试给 TR 一个“modaltoggle”类，然后用 javascript 调用它作为 .modaltoggle 但这也没有用。

Answer 1

为您不想触发模态的元素添加某种标识符，例如 no-modal 类，然后在您的 jQuery 中为模态的 show 添加代码.bs.modal 事件。捕获 relatedElement，即触发事件的元素，然后查看它是否具有您要查找的类。如果是，请运行 e.stopPropagation()。

BOOTPLY

jQuery:

$('#myModal').on('show.bs.modal', function (e) {
  var button = e.relatedTarget;
  if($(button).hasClass('no-modal')) {
    e.stopPropagation();
  }  
});

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

如您所见，第二个按钮有一个名为 no-modal 的类。单击时，jQuery 会检查该类是否存在，如果存在，它会阻止模式弹出。单击第一个按钮会导致模态窗口正常弹出，因为它没有该类。

Bootstrap 模态框在它们被页面上的元素弹出时触发特定事件，从它们被触发的那一刻到它们完全弹出的那一刻。您可以通过查看 Events section 了解这些事件以了解您可以使用它们做什么。对于官方文档中的 Bootstrap 模态。