Javascript 单击按钮时防止引导模式打开

Question

提问by user1227914

I have a page with several bootstrap modals with:

我有一个页面，其中包含多个引导模式：

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

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.

我需要整行可点击，以便它打开模态，除非单击转到其他页面的按钮，然后我需要停止打开模态。

I need something like this

我需要这样的东西

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

But targeting this:

但是针对这个：

data-toggle="modal"

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.

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

Answer 1

回答by MattD

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modalfor example, then in your jQuery add code for the modal's show.bs.modalevent. 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().

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

BOOTPLY

引导

jQuery:

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>

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.

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

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 sectionfor Bootstrap modals in the official documentation.

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

Answer 2

回答by Christopher Esbrandt

Here's a JSFiddle to demo what I'm about to explain: http://jsfiddle.net/68y4zb3g/

这是一个 JSFiddle 来演示我将要解释的内容：http: //jsfiddle.net/68y4zb3g/

As MattD explained and demonstrated, preventing a modal from launching is fairly easy, though his example applies to standard modal application. Since you use the .btnin your script code, I assume you applied it to all your buttons in question. I've also assumed that you kept the modal code similar to that on the Bootstrap demo page. If you provide your actual table code, I can tailor it specifically to what you already have.

正如 MattD 所解释和展示的，阻止模态启动是相当容易的，尽管他的例子适用于标准模态应用程序。由于您.btn在脚本代码中使用了，因此我假设您将其应用于所有相关按钮。我还假设您保留了类似于 Bootstrap 演示页面上的模式代码。如果您提供实际的表格代码，我可以根据您已有的内容专门定制它。

$('tr .btn').on('click', function(e) {
   e.stopPropagation();
});

td {
    border: 1px #000000 solid;
    padding: 10px;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<table>
    <tr data-toggle="modal" data-target="#modal-12345">
        <td>Launch modal 12345</td>
        <td><button id="btn-12345" class="btn">12345</button></td>
    </tr>
    <tr>
        <td colspan="2" class="modal fade" id="modal-12345" 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">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        12345
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Note: I substituted the DIVthat would normally act as the outer wrapper of the modal for the TDand added a tidbit of CSS to make it a little easier to see the separation in content.

注意：我DIV将通常用作模态的外部包装器的替换为，TD并添加了一些 CSS 以使其更容易看到内容中的分离。

By using a class that is applied to all the buttons, you don't have to write a function for every single ID. Having said that, I recommend using a custom class as your trigger. .btnis a standard class within the core of Bootstrap, so try using .modalBtn, to prevent any potential for conflict with legitimate Bootstrap functionality.

通过使用应用于所有按钮的类，您不必为每个 ID 编写函数。话虽如此，我建议使用自定义类作为触发器。 .btn是 Bootstrap 核心中的标准类，因此请尝试使用.modalBtn, 以防止与合法 Bootstrap 功能发生任何潜在冲突。

Hope this helps. ^^

希望这可以帮助。^^

Answer 3

回答by Chirag Rathore

$('#myModal').on('show.bs.modal', function (e) {
 return e.preventDefault(); 
});

OR

或者

<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
 $(target).modal('show');
}
</script>

e.stopPropagation(); or e.preventDefault(); it will not work if you going reopen modal or if multiple modal used in your page.

e.stopPropagation(); 或 e.preventDefault(); 如果您要重新打开模态或在您的页面中使用多个模态，它将不起作用。

Javascript 单击按钮时防止引导模式打开

提问by user1227914

回答by MattD

回答by Christopher Esbrandt

回答by Chirag Rathore

相关推荐

最近更新

标签

Javascript 单击按钮时防止引导模式打开

提问by user1227914

回答by MattD

回答by Christopher Esbrandt

回答by Chirag Rathore

相关推荐

Javascript window.focus(), self.focus() 在 Firefox 中不起作用

Javascript React store.getState 不是函数

如何在 Freemarker 模板或 javascript 中以特定格式转换日期

使用 HTML5 + javascript 进行演示的基本框架

相关推荐

最近更新

标签