Bootstrap modals überlappen

Ich habe eine Seite, die vereinfacht, sieht wie folgt aus:Bootstrap modals überlappen

<html> 
<form> 
//form contents here 
//modal 1 here 
<div class="modal fade" id="addTime" tabindex="-1" role="dialog" aria-labelledby="addTimeLabel"> 
<div class="modal-content"> 
<div class="modal-header"> 
<div class="modal-body"> 
<div class="modal-footer"> 
</div></div></div> 
</form> 
// insert duplicate modals here (2 of them) 
</html>

Der Modal in der Form perfekt funktioniert, aber wenn ich auf Schaltflächen klicken aufzurufen Modalverben 2 und 3, erscheinen sie in der 1. Modalfenster? Wie kann ich das beheben?

Edit: Wenn ich das 1. Modal komplett lösche, funktionieren 2 und 3 perfekt .... aber ich brauche auch das 1. Modal!

Quelle

2016-05-03 Steven

Wenn u modalen klicken 2 dann müssen u modalen 1 von Java-Script –

@varunsharma schließen Hier ist meine ooo: nennen wir die Modalverben „ein "," b "," c ". a befindet sich innerhalb des Formulars und funktioniert nach dem Klicken der Schaltfläche, um das Datenziel aufzurufen. Ich kann es auch gut schließen. b, c funktionieren überhaupt nicht auf dem normalen dom, sie bevölkern innerhalb eines dom auf klick (ich weiß dies, weil ich b, dann a, und es zeigt b über a). Wenn ich einen total entferne, kann ich b bzw. c klicken (und sie richtig schließen). Ich mache mir keine Sorgen darüber, modals über jquery zu schließen (es gibt eine Schaltfläche zum Schließen, wenn der Benutzer mit modal fertig ist). Ich möchte nur, dass alle Mods in meinem Layout funktionieren. – Steven

Überprüfen Sie meine Antwort. Es ist voll oder nicht? –

$(document).ready(function() { 
 

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

 
     $(document).on('show.bs.modal', '.modal', function (event) { 
 
      var zIndex = 1040 + (10 * $('.modal:visible').length); 
 
      $(this).css('z-index', zIndex); 
 
      setTimeout(function() { 
 
       $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); 
 
      }, 0); 
 
     }); 
 

 

 
});

/* crazy batman newspaper spinny thing */ 
 
.rotate { 
 
    transform:rotate(180deg); 
 
    transition:all 0.5s; 
 
} 
 
.rotate.in { 
 
    transform:rotate(1800deg); 
 
    transition:all 1.5s; 
 
}

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

 
<h2>Stacked Bootstrap Modal Example.</h2> 
 
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> 
 

 
<div class="modal fade" id="myModal"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       \t <h4 class="modal-title">Modal 1</h4> 
 

 
      </div> 
 
      <div class="container"></div> 
 
      <div class="modal-body">Content for the dialog/modal goes here. 
 
       <br> 
 
       <br> 
 
       <br> 
 
       <p>more content</p> 
 
       <br> 
 
       <br> 
 
       <br> \t <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a> 
 

 
      </div> 
 
      <div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
\t <a href="#" class="btn btn-primary">Save changes</a> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="modal fade rotate" id="myModal2"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       \t <h4 class="modal-title">Modal 2</h4> 
 

 
      </div> 
 
      <div class="container"></div> 
 
      <div class="modal-body">Content for the dialog/modal goes here. 
 
       <br> 
 
       <br> 
 
       <p>come content</p> 
 
       <br> 
 
       <br> 
 
       <br> \t <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a> 
 

 
      </div> 
 
      <div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
\t <a href="#" class="btn btn-primary">Save changes</a> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="myModal3"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       \t <h4 class="modal-title">Modal 3</h4> 
 

 
      </div> 
 
      <div class="container"></div> 
 
      <div class="modal-body">Content for the dialog/modal goes here. 
 
       <br> 
 
       <br> 
 
       <br> 
 
       <br> 
 
       <br> \t <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a> 
 

 
      </div> 
 
      <div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
\t <a href="#" class="btn btn-primary">Save changes</a> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="myModal4"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       \t <h4 class="modal-title">Modal 4</h4> 
 

 
      </div> 
 
      <div class="container"></div> 
 
      <div class="modal-body">Content for the dialog/modal goes here.</div> 
 
      <div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
\t <a href="#" class="btn btn-primary">Save changes</a> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

prüfen diese jsfiddle: http://jsfiddle.net/CxdUQ/

Quelle

2016-05-03 19:19:34

Lol, ich brauche nicht "modalception", ich will nur 3 verschiedene models, zugänglich von 3 verschiedenen Tasten auf der Hauptseite, um beim Klicken zu arbeiten. Bitte beachten Sie meine Anmerkung zu der obigen Frage hinzugefügt – Steven

Bootstrap modals überlappen

Antwort

Verwandte Themen