Zwei verschiedene modale Bootstrap-Fenster ... beide öffnen auf einmal

Question

Ich habe mehrere ähnliche Fragen gefunden, aber keine scheint mir die Antwort zu geben, die ich brauche. Ich habe eine Seite, die zwei verschiedene modale Fenster benötigt. Man öffnet sich, indem man auf eine der 8 Schaltflächen klickt (der modale Inhalt ist derselbe, egal, auf welchen Sie klicken), während der andere ein einfaches "Kontaktinformations" -Modal ist, das sich öffnet, wenn Sie auf einen Standard-Textlink klicken. Das Problem ist, dass mit diesem Code beide modalen Fenster gleichzeitig übereinander geöffnet werden, unabhängig davon, auf welchen Button/Link Sie klicken. Ich brauche sie separat zu öffnen, unabhängig voneinander.

Hier ist die Skripte:

 <!--*********** 
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 
***********--> 

und die 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 --> 

ich das Problem dachte könnte sein, dass ich eine Klasse anstelle einer ID für die "selectLink" modal bin mit, aber bevor ich das zweite Modal (mit der ID) hinzugefügt habe, hat das gut funktioniert. Ich weiß nicht viel über jQuery, also verpasse ich vielleicht etwas in diesem Bereich.

Ich habe mehrere Fragen zu SO betrachtet, aber keiner hat die notwendige Antwort gegeben.

Answer 1

Ihr Problem ist, diese Linie von JS:

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

Es sagt, „rufen Sie die modal('show') Funktion auf alle Elemente mit Klasse modal“ an die spezifischen modalen von id beziehen soll, wie folgt aus:

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

Oder

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