防止单击按钮时打开 bootstrap 模式

Question

我有一个包含多个 bootstrap 模式的页面：

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

问题是，我有一整行 table 是可点击的，例如

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

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

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

我需要这样的东西

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

但针对这个：

data-toggle="modal"

我也尝试给 TR 一个 "modaltoggle" 的 class 然后用 javascript 调用它作为 .modaltoggle 但这也没有用。

Answer 1

为您不想触发模式的项目添加某种标识符，例如 class，例如 no-modal，然后在您的 jQuery 中添加代码模态的 show.bs.modal 事件。捕获 relatedElement，即触发事件的元素，然后查看它是否具有您要查找的 class。如果是，运行 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 的 class。单击时，jQuery 检查 class 是否存在，如果存在，它会阻止模式弹出。单击第一个按钮会导致模态框正常弹出，因为它没有 class.

Bootstrap 当模态被页面上的元素弹出时，模态会触发特定事件，从它们被触发的那一刻到它们完全弹出的那一刻。您可以通过查看官方文档中的 Events section for Bootstrap 模态来了解这些事件以了解它们的用途。

Answer 2

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

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

$('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 替换了 DIV，它通常充当模态的外包装，并添加了一个 CSS 的花絮，使其更容易看到内容上的分离。

通过使用应用于所有按钮的 class，您不必为每个 ID 都编写一个函数。话虽如此，我建议使用自定义 class 作为触发器。 .btn 是 Bootstrap 核心中的标准 class，因此请尝试使用 .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();如果您要重新打开模式或如果您的页面中使用了多个模式，它将不起作用。

Answer 4

从您的代码中删除以下行：

data-toggle = "模态"

然后，在验证完成后，在您的函数中编写以下代码：

$('#myModal').modal({
   show: 'true'
});

防止单击按钮时打开 bootstrap 模式

prevent bootstrap modal from opening when a button is clicked

html

javascript

css

jquery

twitter-bootstrap