Question

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

我正在使用bootstrap，这是我的代码片段：

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

基本上我把第二个模态放在第一个模态中。

Answer 1

虽然Bootstrap 3文档说“不支持重叠模式...”，但我认为我发现了一种有效的解决方法。你需要......

确保您的第二模态标记位于第一模态的主体之外
使用jQuery中的Bootstrap模态toggle方法手动关闭第二个模态。
更改第二个模态的z-index，使其显示在第一个模态上。

http://bootply.com/108243

另外，我更改了标记以删除fade和`display：none'。

Answer 2

我从另一个模态打开了一个模态。我称之为'模态'。听起来你只需要确保你的事件针对的是正确的模态。

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

Answer 3

只需正确设置z-index即可。一定不要嵌套它们，它应该工作得很好。它不是＆＃34;支持＆＃34;，但我一直这样做。我目前正在处理的一个项目堆叠在一起，没有任何问题。

我使用的是Bootstrap v3.3.2和jQuery 1.11.2。

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

3 个答案: