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

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部分来了解这些事件,以了解您可以使用它们的内容.

Answer 2

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

正如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>

注意:我替换了DIV它通常作为模式的外包装,TD并添加了一点CSS的内容,使其更容易看到内容中的分离.

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

希望这可以帮助.^^

Answer 3

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

或者

<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(); 或 e.preventDefault(); 如果您要重新打开模态或在您的页面中使用多个模态，它将不起作用。