Question

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

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

我会尝试在一个plunkr中重现这个问题，但我是那些新手，所以我想我是否知道这是一个知道问题，或者是否有人知道问题是什么，任何人？

更新好的，所以我创建了-plunker-我的问题，因为我创建了这个plunker我意识到问题出在我的info模态/工厂。< / p>

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

重现问题：

按＆＃39;打开我！＆＃39; to＆＃34; load＆＃34;数据，并打开第一个模态。然后按“你好”＆＃39;文本打开第二个模态。

注意这就应该是这样，两个模态都有正确的背景淡化。

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

Answer 1

我希望这可以帮助你的朋友

＆＃13;

        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");
            }
        });

＆＃13;

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

＆＃13;

嵌套的ui bootstrap模态，缺少背景

1 个答案: