2つの異なるブートストラップモーダルウィンドウ...両方が一度に開く

Question

私はいくつかの同様の質問を見つけましたが、どれも私が必要とする答えを与えるものはありません。 2つの異なるモーダルウィンドウが必要なページがあります。 1つは、8つのボタンのいずれかをクリックすると開きます（モーダルコンテンツはクリックしても同じです）。もう1つは、標準的なテキストリンクをクリックすると開く簡単な「連絡先情報」モーダルです。問題は、このコードでは、どちらのボタン/リンクをクリックしても、両方のモーダルウィンドウが同時に開いていることです。私は、彼らがお互いに独立して別々に開く必要があります。ここで

はスクリプトです：

 <!--*********** 
MODAL WINDOW - SELECT TEMPLATE POPUP 
***********--> 
    <script>$('.selectLink').click(function() { 
    $('.modal') 
     .prop('class', 'modal fade') // revert to default 
     .addClass($(this).data('direction')); 
    $('.modal').modal('show'); 
});</script> 
<!--*********** 
MODAL WINDOW - SELECT TEMPLATE POPUP 
***********--> 

    <!--*********** 
MODAL WINDOW - HELP POPUP 
***********--> 
    <script>$('#helpLink').click(function() { 
    $('.modal') 
     .prop('class', 'modal fade') // revert to default 
     .addClass($(this).data('direction')); 
    $('.modal').modal('show'); 
});</script> 
<!--*********** 
MODAL WINDOW - HELP POPUP 
***********--> 

とHTML：

<!-- MODAL WINDOW - SELECT TEMPLATE POPUP -->     
    <div class="modal fade" class="selectLink" role="dialog"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h2 class="modal-title">Customize Your Email!</h4> 
      </div> 
    <div class="modal-body"> 
     ... 
</div> 

     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal -->  
<!-- MODAL WINDOW - SELECT TEMPLATE POPUP --> 


     <!-- MODAL WINDOW - HELP POPUP -->     
    <div id="helpLink" class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h2 class="modal-title">Contact Us for Assistance</h4> 
      </div> 
    <div class="modal-body"> 
     ...   
</div> 

     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal -->  
<!-- MODAL WINDOW - HELP POPUP --> 

私は、問題は、私は「selectLink」モーダルのクラスの代わりにIDを使用していていることかもしれないと思いましたしかし、私が2番目のモーダル（id付き）を追加する前に、うまくいきました。私はjqueryについてよく知らないので、おそらく私はそのセクションで何かを見逃しています。

私はSOのいくつかの質問を見てきましたが、必要な回答はありませんでした。

Answer 1

あなたの問題は、JSのこの行です：

$('.modal').modal('show'); 

このように、idで特定のモーダルを参照してください「クラスmodalを持つすべての要素にmodal('show')関数を呼び出す」と言っている：

$('#helpLink').modal('show'); 

それとも

$('#selectLink').modal('show');