有没有办法弹出另一个模态窗口？

我正在制作一个模式上的应用程序表单，我这样做是为了让用户可以将他们的照片上传到应用程序表单上。所以我的缩略图里面有一个“上传图片”的气泡，当我点击它时，会弹出一个模式。然而问题是当我点击我的“上传图片”模式上的“取消”或“上传”时，它会关闭两个模式窗口（申请表和上传图片）。有没有办法弹出另一个模态窗口？

我使用的引导，这里是我的代码片段：

<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