引导多模态模态背景问题

Bootstrap multiple modals modal-backdrop issue

本文关键字：模态 背景 问题      更新时间：2023-09-26

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

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

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

到HTML代码。这是很好的第一个，但因为它是opacity: .5;，然后使页面黑暗的每一个模式打开。是否有一种方法来检查是否一个modal-backdrop已经存在，在这种情况下不打开另一个?

我用either打开情态动词

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

或使用jQuery:

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

对这个问题的任何帮助都是非常感激的!

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

让CSS处理。

.modal-backdrop:nth-child(2n-1) {
  opacity : 0;
}
https://jsfiddle.net/zsk4econ/3/

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

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

您可以根据需要添加/删除data- background ="false"属性。除此之外，你还可以添加像

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

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


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

相关文章：