Bootstrap多个模态框modal-backdrop问题

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

---

这是一个 UI 问题 - 问题在于您叠加了多个模态框，导致了不断加深的黑暗问题。解决方案是整理您的工作流程，以便您一次只打开一个模态框。也许您可以在同一模态框内有不同的 div，并切换它们的可见性 / 显示状态 - 但是在第一个模态框仍然打开时，打开第二个模态框会极其糟糕的 UI / UX。不久之前还不能这样做，现在更应该避免这样做。我的看法是。您还可以整理您的调用链接 - <a href="#modal_01" data-toggle="modal">Modal</a>。 - gavgrif

您可以根据子模态框的要求添加/删除data-backdrop="false"数据。 - AB Udhay

@ABUdhay 感谢您的提示！它似乎起作用了，但只是部分地，因为点击空白处无法关闭模态框 :( - user1996496

最简单的技巧是 .modal { background: rgba(0, 0, 0, 0.5) !important; } .modal-backdrop { display: none !important; }。 - Malik Zahid

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

Answer 2

让CSS来处理它。

.modal-backdrop:nth-child(2n-1) {
  opacity : 0;
}

https://jsfiddle.net/zsk4econ/3/

- cjmling

---

甚至比不透明更好的是 display:none;。 - Soturi

Answer 3

您可以根据需要添加/删除data-backdrop="false"属性。否则，您也可以像这样包含CSS：

.modal-backdrop+.modal-backdrop {
  opacity : 0;
}

- AB Udhay

Answer 4

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

- Nirali Maniar

---

尝试着翻译，但最好在几句话中详细阐述。 - Gahan

尽管此代码可能回答了问题，但提供有关如何和/或为什么解决问题的附加上下文将改进答案的长期价值。 - Badacadabra

解决方案对我有用，但同意之前的评论提供关于你的解决方案的信息。 - devHead

Answer 5

// Make sure only one backdrop is rendered 
 $(document).on('show.bs.modal', '.modal', function () {
        if ($(".modal-backdrop").length > 1) {
            $(".modal-backdrop").not(':first').remove();
        }
    });
    // Remove all backdrop on close
    $(document).on('hide.bs.modal', '.modal', function () {
        if ($(".modal-backdrop").length > 1) {
            $(".modal-backdrop").remove();
        }
    });

- Vedant Mistry