引導模態重疊

我有一個簡化的頁面，看起來像這樣：引導模態重疊

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

形式中的模式可以完美運行，但是當我點擊按鈕，調模態2和3，它們出現內第一個模態窗口？我怎樣才能解決這個問題？

編輯：如果我完全刪除1模式，第2和3的工作完美....但我需要的第一個模式呢！

來源

2016-05-03 Steven

當u點擊模式2則u需要通過Java腳本 –

@varunsharma這裏關閉模式1是我的OOO：讓我們稱之爲的情態動詞「一「，」b「，」c「。 a在表單內，並在按鈕點擊調用其數據目標時工作。我也可以關閉它。 b，c在正常的dom上根本不工作，它們在點擊中填充（我知道這是因爲我可以點擊b，然後a，並且它顯示b疊加在a上面）。如果我完全刪除，我可以分別單擊b或c（並正確關閉它們）。我不擔心通過jquery關閉模式（當用戶使用模式完成時，有一個關閉按鈕）。我只是想讓所有的模塊在我的佈局中工作。 – Steven

檢查我的答案。它是用完還是不用？ –

$(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>

入住此的jsfiddle：http://jsfiddle.net/CxdUQ/

來源

2016-05-03 19:19:34

大聲笑，我不需要「modalception」打開多個模態，我只是想3個不同的模態，從3個不同的按鈕訪問在主站點上點擊工作。請參閱我的筆記添加到上面的問題 – Steven

引導模態重疊

回答

相關問題