Bootstrap多个模态模态背景问题[重复]答案

【问题标题】：Bootstrap multiple modals modal-backdrop issue [duplicate]Bootstrap多个模态模态背景问题[重复]
【发布时间】：2017-01-28 01:26:08
【问题描述】：

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

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

<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/

【问题讨论】：

这是一个 UI 问题 - 问题是您覆盖了多个模式并导致您的黑暗问题越来越多。解决方案是整理您的工作流程，以便您一次只能打开一个模式。也许你可以在同一个模态中拥有不同的 div 并切换它们的可见性/显示状态 - 但是它非常糟糕的 UI / UX 让一个模态在第一个仍然打开的同时打开第二个。不是很久以前你做不到。现在它更多的是你不应该这样做。国际海事组织。您也可以整理您的通话链接 - Modal
您可以添加/删除 data-backdrop="false" 取决于子模态的要求
@ABUdhay 感谢您的提示！它似乎有效，但只是部分有效，因为点击空白区域不会关闭模式:(
最简单的技巧是.modal { background: rgba(0, 0, 0, 0.5) !important; } .modal-backdrop { display: none !important; }

标签： javascript jquery twitter-bootstrap

【解决方案1】：

让 CSS 处理它。

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

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

【讨论】：

【解决方案2】：

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

这样的 css

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

很好，但最好用几行来详细说明。
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
解决方案对我有用，但同意以前的 cmets 提供有关您的解决方案的信息

【解决方案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();
        }
    });

【讨论】：