Question

我正在尝试使用角度ui bootstrap中的模态，但是当显示模态的代码执行时，虽然窗口模糊但它没有显示，

模态的代码是：

<script type="text/ng-template" id="test.html">
    <div class="modal-header">
        <h3>XXXX</h3>
    </div>

    <div class="modal-body">
        <p>XXXX</p>
    </div>

    <div class="modal-footer">
        xxxxxx
    </div>
</script>

显示模态的按钮：

<div class="container-fluid" ng-controller="MainController">
    <button ng-click="showModal()" ></button>
</div>

控制器：

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/home.html'
    });
}]);

app.controller('MainController', function($scope, $rootScope, $modal) {
    $scope.showModal = function() {
        $modal.open({templateUrl:'test.html', backdrop: true,windowClass: 'modal'});  
    };
});

上述代码有问题吗？

Answer 1

我有同样的问题并使用：

windowClass : 'show'

$ modal.open函数中的

就行了。

Answer 2

我的问题是，当我应该只加载'ui-bootstrap-tpls.min.js时，我包含了两个js文件（ui-bootstrap.min.js和ui-bootstrap-tpls.min.js） '。之后，它就像一个魅力。

Answer 3

AngularUI模式的文档说

windowClass - 要添加到模态窗口模板的其他CSS类

你正在使用哪个类'模态'。这个类是由你定义的吗？不应该是一个问题，但尝试删除它。

Angular Bootstrap UI模式未显示

3 个答案: