Angular Bootstrap UI模态没有显示

Angular Bootstrap UI modal not showing

本文关键字：显示 模态 Bootstrap UI Angular      更新时间：2023-09-26

我试图从angular 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'});  
    };
});

以上代码有问题吗?

我的问题是，我包括两个js文件(ui-bootstrap.min.js和ui-bootstrap-tpl .min.js)当我应该只加载'ui-bootstrap-tpl .min.js'。在那之后，它就像一个魅力。

我有同样的问题，使用:

windowClass : 'show'

中的$modal。

AngularUI modal的文档中说

windowClass -添加到模态窗口模板的额外CSS类

你正在使用的这个'modal'是哪个类?这个类是你自己定义的吗?这应该不是问题，但请尝试删除

相关文章：