防止單擊按鈕時打開引導模式

Question

我有一個包含幾個引導模式的頁面：

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事件添加代碼。 捕獲相關元素，這是觸發事件的元素，然后查看它是否具有您要查找的類。 如果是，請運行e.stopPropagation() 。

引導

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 modals 在被頁面上的元素彈出時觸發特定事件，從它們被觸發的那一刻到它們完全彈出的那一刻。 您可以通過查看官方文檔中 Bootstrap modals 的事件部分來了解這些事件，以了解您可以使用它們。

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模式的外部包裝器的 DIV，並添加了一些 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(); 如果您要重新打開模式或頁面中使用了多個模式，它將不起作用。

Answer 4

1. 從您的代碼中刪除以下行：

   數據切換 = “模態”

然后，在驗證完成后，在您的函數中編寫以下代碼：

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