第二模态限于第一模态区域

Question

使用 bootstrap 3.3.5 并尝试打开第二个 modal，发现一个奇怪的行为：

1. 背景不显示在第二个模态周围，而不是它 覆盖第一个模态的背景
2. 第二个模态是 限于第一个模态的区域。

查看示例：http://jsfiddle.net/2zqe93u1/show/

寻找一种方法来显示带有背景的第二个模态，并且不受第一个模态的限制。

代码：

<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Title #1</span>
            </div>
            <div class="modal-body">
                <div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Title #2</h4>
                            </div>
                            <div class="modal-body">
                                <p>Second Modal</p>
                                <p>Second Modal</p>
                                <p>Second Modal</p>
                                <p>Second Modal</p>
                                <p>Second Modal</p>
                                <p>Second Modal</p>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-default" data-number="2">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            <a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
            </div>
            <div class="modal-footer">
                <a data-loading-text="Wait" class="btn btn-default">Cancel</a>
            </div>
        </div>
    </div>
</div>

Answer 1

您必须使用两个分开的模式来实现这个目标。

第一点我可以做到这一点 https://jsfiddle.net/2zqe93u1/

$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})

$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});

但我无法理解第二个，如果第二个模态可以从第一个中拖出，为什么背景必须在第一个上？ 但是随着模态上发生的事件，我相信你可以做到这一点。 看看 jsfiddle 来了解思路

Answer 2

正如@Tim Lewis bootstrap 所说，不支持堆叠模式并且一次显示多个模式需要自定义代码

首先删除第一个模态中的第二个模态HTML并将其放在外面，所以HTML将是;

<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
               <span class="modal-title">Title #1</span>
            </div>
            <div class="modal-body">
                <a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
            </div>
            <div class="modal-footer">
                <a data-loading-text="Wait" class="btn btn-default">Cancel</a>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                    <h4 class="modal-title">Title #2</h4>
            </div>
            <div class="modal-body">
                <p>Second Modal</p>
                <p>Second Modal</p>
                <p>Second Modal</p>
                <p>Second Modal</p>
                <p>Second Modal</p>
                <p>Second Modal</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-number="2">Close</button>
            </div>
        </div>
    </div>
</div>

它将解决问题第二个模态仅限于第一个模态的区域。

现在解决问题背景不显示在第二个模态周围，而不是覆盖第一个模态的背景

在JS中添加以下代码

$(document).ready(function () {
    $('#SecondModal').on('show.bs.modal', function () {
        $('#FirstModal').css('z-index', 1039);
    });

    $('#SecondModal').on('hidden.bs.modal', function () {
        $('#FirstModal').css('z-index', 1041);
    });
});

Fiddle