Bootstrap多模态模态背景问题

问题描述

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

I have a page where one Bootstrap modal opens another modal.

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

The problem is that with each opened modal, it adds

< div class =modal-backdrop淡入>< / div>

到HTML代码。这对第一个很好，但因为它是不透明度：.5; 然后它会使每个模态打开时页面变暗。有没有办法检查模态背景是否已经存在，并且在这种情况下不能打开另一个？

to the HTML code. It's fine for the first one, but since it's opacity: .5; it then makes the page darker on every modal opened. Is there a way to check if a modal-backdrop already exists and in that case not open another one?

我打开我的模态

< a href =data-target =＃modal_01data-toggle =modal> ;模态< / a>

或jQuery：

$（'＃modal_01'）。modal（'show'）;

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

Any help to this problem is greatly appreciated!

这里有一个方便您的小提琴：

Here's a fiddle for your convenience: https://jsfiddle.net/zsk4econ/1/

推荐答案

以下是我认为适合您案例的工作演示。

Here is the working demo that I think will fit in your case.

$(".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>

这篇关于Bootstrap多模态模态背景问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！