Bootstrap多模态模态背景问题

时间:2016-09-20 08:01:26

标签: javascript jquery twitter-bootstrap

我有一个页面,其中一个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/

5 个答案:

答案 0 :(得分:9)

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

&#13;
&#13;
$(".modal").on("shown.bs.modal", function () {
    if ($(".modal-backdrop").length > 1) {
        $(".modal-backdrop").not(':first').remove();
    }
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:7)

让CSS处理它。

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

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

答案 2 :(得分:4)

您可以添加/删除data-backdrop =&#34; false&#34;属性取决于要求。否则你也可以包括像

这样的CSS
.modal-backdrop+.modal-backdrop {
  opacity : 0;
}

答案 3 :(得分:0)

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

答案 4 :(得分:0)

// 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();
        }
    });