防止单击按钮时打开引导模式 [英] prevent bootstrap modal from opening when a button is clicked

问题描述

我有一个页面有几个引导模式与：

I have a page with several bootstrap modals with:

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

问题是，我有一个可以点击的整个表行， p>

The problem is, I have an entire table row that is clickable, like

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

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

The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.

我需要整个行可点击，所以它打开模态，除非按钮去

I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.

我需要这样的

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

但定位：

data-toggle="modal"

类modaltoggle，然后用javascript作为.modaltoggle调用它，但是没有工作。

I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.

推荐答案

你不想触发模态的项的标识符类型，类似 no-modal 的类，然后在你的jQuery中添加代码为modal的 show.bs.modal 事件。捕获relatedElement，它是触发事件的元素，然后看看它是否有你正在寻找的类。如果是，请运行 e.stopPropagation（）。

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run 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 title</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>

正如你所看到的，第二个按钮有一个 。当点击时，jQuery检查该类的存在，如果存在，它阻止模态弹出。点击第一个按钮会导致模态正常弹出，因为它没有该类。

As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.

Bootstrap模式触发特定事件，当它们被页面上的元素弹出时，从他们被触发的那一刻，他们已经完全弹出的那一刻。您可以通过查看活动部分了解这些活动，了解您可以使用这些活动的方式。 a>用于官方文档中的Bootstrap模式。

Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.

这篇关于防止单击按钮时打开引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！