有沒有辦法彈出另一個模態窗口？

我正在製作一個模式上的應用程序表單，我這樣做是爲了讓用戶可以將他們的照片上傳到應用程序表單上。所以我的縮略圖裏面有一個「上傳圖片」的氣泡，當我點擊它時，會彈出一個模式。然而問題是當我點擊我的「上傳圖片」模式上的「取消」或「上傳」時，它會關閉兩個模式窗口（申請表和上傳圖片）。有沒有辦法彈出另一個模態窗口？

我使用的引導，這裏是我的代碼片段：

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title" id="myModalLabel">Application Form</h4> 
     </div> 

    <!-- START OF MODAL BODY--> 

     <div class="modal-body">   
      <div class="col-sm-5"> 
       <div class="thumbnail"> 
        <div class="avatar"> 
         <a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar"> 
          <img src="img/face1.jpg" alt="..."> 
         </a> 
     <!-- Upload new avatar bubble --> 
         <div class="avatar-bubble"> 
          <a href="#" data-toggle="modal" data-target="#upload-avatar"><i class="fa fa-plus"></i> Upload new avatar</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!--Modal for uploading photo--> 
      <div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
          <h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4> 
         </div> 
         <div class="modal-body"> 
          <p>Please choose a file to upload. JPG, PNG, GIF only.</p> 
           <form role="form"> 
            <div class="form-group"> 
             <label for="file">File input</label> 
             <input type="file" id="file"> 
             <p class="help-block">Files up to 5Mb only.</p> 
            </div> 
            <button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button> 
            <button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button> 
           </form> 
         </div> 
        </div><!-- /.modal-content --> 
       </div><!-- /.modal-dialog --> 
      </div> 
     </div> <!-- END OF APPLICATION FORM MODAL BODY --> 

     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog -->

基本上，我把我的第二模式我的第一模內。

來源

2014-01-24 nutellafella

根據BS 3文檔：「重疊模式不支持。確保注意打開模式，而另一個可見..」http://getbootstrap.com/javascript/#modals – ZimSystem