Wie man eines der modalen, wenn ausgelöst zwei modale im Bootstrap

Question

Ich habe zwei modale in meinem Formular, was ich versuche zu tun ist, wenn ich ein Pop-up-modal für den Benutzer erstellen die Kampagne wann erstellen Ich erstelle die Kampagne, ich möchte ein Popup-Modul erstellen, um sie erneut bestätigen zu lassen. Wenn ich jedoch die Schaltfläche "Abbrechen" auf dem Bestätigungsmodal dort ausgelöst habe, wird das gesamte Modal automatisch ausgeblendet.

Das Folgende ist mein Ja Nein Modal.

<div class="modal fade stick-up CampaignYesNoModal" tabindex="-1" role="dialog" aria-labelledby="CampaignYesNoModal" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 

     <div class="modal-content text-center"> 
      <div class="modal-header clearfix text-left"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        <i class="pg-close fs-14 "></i> 
       </button> 
       <h5 id="messageBox2" class="text-center" style="font-size:14px">Create Campaign?</h5> 
      </div> 
      <div class="modal-footer" style="text-align: center !important"> 

       <button type="submit" class="btn btn-primary " id="modalYesBtn2" name="modalYesBtn2" style="width:80px">Yes</button> 
       <button type="button" class="btn btn-default " data-dismiss="modal" style="width:80px">Cancel</button> 
      </div> 
     </div> 
    </div> 
</div> 

Als ich abbrechen Boot des modalen abbrechen wird, wie man es verhindern passieren?

Answer 1

Sie müssen nur die Tasten data-dismiss neu konfigurieren.

Ich habe die Schaltfläche zum Fortfahren konfiguriert, um fortzufahren und beide Modale zu schließen, und die Schaltfläche Abbrechen, um nur das Bestätigungsmodal zu schließen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Begin Your Campaign</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Campaign Manager</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some input to take data here.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-info" data-toggle="modal" data-target="#CampaignYesNoModal">Proceed</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade stick-up CampaignYesNoModal" tabindex="-1" role="dialog" aria-labelledby="CampaignYesNoModal" id="CampaignYesNoModal" aria-hidden="true"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content text-center"> 
 
      <div class="modal-header clearfix text-left"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
 
        <i class="pg-close fs-14 "></i> 
 
       </button> 
 
       <h5 id="messageBox2" class="text-center" style="font-size:14px">Create Campaign?</h5> 
 
      </div> 
 
      <div class="modal-footer" style="text-align: center !important"> 
 
       <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-dismiss="modal" style="width:80px">Create</button> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Back</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Ok, es gibt einen Weg, dies zu tun:

Zuerst schließt Tag wie unten sowohl für die modalen erwähnt ändern (s):

<button type="button" class="close"> // Notice that I have removed `data-dismiss="modal" aria-hidden="true" so it will not close any modal` 
    <i class="pg-close fs-14 "></i> 
</button> 

Dann schreiben jquery Code der zum Schließen Nur entsprechendes Modal,

$(document).ready(function(){ 
    $('.close').parents('.modal:first').hide(); 
}); 

Der oben genannte Code schließt nur das entsprechende Modal.