ブートストラップモーダル起動イベントを2回表示する

Question

私はモーダルを作成中で、イベントショーは2回実行されています。私はそれについてもJSのフィドルを作成しました。以下 はモーダル

<div class="container"> 
    <h2>Large Modal</h2> 
    <button type="button" class="btn btn-info btn-lg" id="myModalBtn">Open Large Modal</button> 

    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>This is a large modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$("#myModal").on('show.bs.modal', function() { 
     console.log("open"); 
    }); 
    $("#myModal").on('hide.bs.modal', function() { 
     console.log("close"); 
    }); 
    $("#myModalBtn").on("click",function(){ 
     $("#myModal").modal({backdrop: 'static', keyboard: false}); 
$("#myModal").modal('show'); 
    }); 
</script> 

Answer 1

を開くためのコードは、たぶん、あなたがボタンにdata-toggle="modal"とdata-target="#myModal"属性を付加していない理由はありますが、私はわかりません。

<button type="button" class="btn btn-info btn-lg" id="myModalBtn" 
    data-toggle="modal" and data-target="#myModal">Open Large Modal</button> 

をしても、このセクションを削除します：だからあなただけのモーダル開口部との定期的なモーダルボタンをしたい、あなたがボタンにこれら二つの属性を追加することができます仮定

$("#myModalBtn").on("click",function(){ 
    $("#myModal").modal({backdrop: 'static', keyboard: false}); 
    $("#myModal").modal('show'); 
}); 

あなたがにbootstrap modal usageをチェックアウトすることができますあなたのコードがブートストラップの標準に合っていることを確認してください。