嵌套的 ui 引导模式，缺少背景答案

【问题标题】：nested ui bootstrap modals, missing backdrop嵌套的 ui 引导模式，缺少背景
【发布时间】：2016-03-27 12:30:45
【问题描述】：

在我的应用程序中，我打开了两个模态，一个在另一个中。两种模式都具有backdrop: 'static' 属性。

我第一次打开两个模态都很好，但是当我关闭它们然后再次打开时，第二个模态将失去其背景，或者至少背景不会褪色。

我会尝试在 plunkr 中重现这个问题，但我是新手，所以我想我会看看这是否是一个已知问题，或者是否有人知道问题可能是什么，有人吗？

更新好的，所以我创建了一个 -plunker- 来解决我的问题，当我创建这个 plunker 时，我意识到问题出在我的 info modal/factory 上。

我从服务器请求一些数据，这是用setTimeout 函数模拟的。在加载数据时，会显示一个信息模态，在第一个嵌套模态打开之前关闭，但我仍然认为这是问题所在。

重现问题：

按“打开我！” “加载”数据，并打开第一个模态。然后按'hello'文本打开第二个模态。

注意应该是这样的，两种模式都有正确的背景渐变。

关闭两个模态并再次打开它们，这一次你会看到第二个模态已经失去了背景。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

我希望这对你有帮助，我的朋友

        angular.module("app", []);
        angular.module("app").controller("ctrl", function ($scope) {
            $scope.openModals = function() {
                $("#myModal1").modal("show");
                $("#myModal2").modal("show");
            }

            $scope.openModal_1 = function () {
                $("#myModal1").modal("show");
            }
        });

<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <button ng-click="openModals()">open both modal</button>
    <button ng-click="openModal_1()">open modal 1 and then modal 2</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title 1</h4>
                </div>
                <div class="modal-body">
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
                        Launch  modal 2
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title 2</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</body>
</html>

【讨论】：