Html 有没有办法在另一个窗口上弹出一个模式窗口？

我正在制作一个模式上的申请表，这样用户就可以在申请表上上传他们的照片。所以我的缩略图里面有一个上传图片的气泡，当我点击它时，会弹出一个模式。但问题是，当我点击上传图片模式上的“取消”或“上传”时，它会关闭模式windows应用程序窗体和上传图片

我正在使用引导，下面是我的代码片段：

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

---

基本上，我把我的第二模态放在我的第一模态中

虽然Bootstrap 3文档说不支持重叠模态，但我想我找到了一个可行的解决方法。你需要

确保第二模态的标记在第一模态的主体之外 使用jQuery中的引导模式切换方法手动关闭第二个模式。 更改第二个模态的z索引，使其显示在第一个模态上。

---

另外，我更改了您的标记以删除淡入淡出和“显示：无”。

我已从另一个模式打开了一个模式。我称之为“modalception”。听起来，您只需要确保您的事件以正确的模式为目标

---

我有重叠的情态动词，它们按预期工作。单击第二个模式的背景仅关闭该模式，而不是其后面的模式。

只需正确设置z索引即可。一定不要把它们埋在窝里，这样就可以正常工作了。它不受支持，但我一直都这样做。一个项目，我目前正在工作的堆栈3上彼此没有问题

---

我正在使用Bootstrap v3.3.2和jQuery 1.11.2。

根据BS 3文档：不支持重叠模态。请务必注意，在另一个模态可见时打开一个模态。。可能重复的