Bootstrap 多模态模态背景问题

Question

我有一个页面，其中一个 Bootstrap 模态打开另一个模态。

问题是，对于每个打开的模态，它都会添加

<div class="modal-backdrop fade in"></div>

到 HTML 代码。对于第一个没问题，但因为它是 opacity: .5; 它会在打开的每个模式上使页面变暗。有没有办法检查 modal-backdrop 是否已经存在，在这种情况下不打开另一个？

我打开我的模态

<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>

或者使用 jQuery：

$('#modal_01').modal('show');

非常感谢对这个问题的任何帮助！

为了您的方便，这里有一个小提琴： https ://jsfiddle.net/zsk4econ/1/

原文由 user1996496 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我认为适合您的情况的工作演示。

 $(".modal").on("shown.bs.modal", function () {
    if ($(".modal-backdrop").length > 1) {
        $(".modal-backdrop").not(':first').remove();
    }
})

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Open Modal 3</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

原文由 Anil Panwar 发布，翻译遵循 CC BY-SA 4.0 许可协议