AngularJS bootstrap.ui模式不显示

一尘不染

AngularJS bootstrap.ui模式不显示

angularjs

我正在尝试使用AngularJS bootstrap.ui显示模式对话框。当我执行$
modal.open（…）时，屏幕变灰，并且我的templateUrl中的html从服务器调用，但是没有模式显示。当我单击灰色区域时，模态“关闭”，即灰色区域消失，屏幕再次看起来正常。我无法弄清楚为什么看不到任何模态屏幕。

我正在尝试遵循本教程： Angular指令

我正在使用Visual Studio 2013，MVC 5，AngularJS 1.2.2。

我正在使用VS项目随附的bootstrap.css。它具有模态类。我没有从Javascript控制台报告任何错误。我的应用程序定义如下：

var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ...

blogApp.controller('blogController',
function blogController($scope, $modal, $log, blogData, userData) {

    ...

    $scope.showPrivacy = function() {
        $modal.open({
            templateUrl: '/Privacy',
            controller: 'PrivacyInstanceController'
        });
        return false;
    };
});


var PrivacyInstanceController = function($scope, $modalInstance) {
    $scope.close = function() {
        $modalInstance.close();
    };
}

我的标记是：

<div ng-controller="blogController">
        <a ng-click="showPrivacy()">Privacy Policy</a>
    </div>

知道为什么我的屏幕变灰，/ Privacy资源被加载并且单击灰色时屏幕恢复正常，但是没有模态出现吗？

阅读 186

2020-07-04

共1个答案

一尘不染

之前有完全相同的症状。不记得确切的细节，但是我认为主要的问题是模态实例始终具有display:none。

确保您使用ui-bootstrapwith模板（ui-bootstrap-tpls.js）-可能会出现变灰的效果。
在最底部ui-bootstrap-tpls.js的modal模板中（您可以通过“ template / modal / window.html”找到它）并在其中添加style="display:block". If it will not help try to match css classes of the template against yourbootstrap.css`。

我个人使用的一些自定义版本bootstrap3，现在将它们作为模板：

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/backdrop.html",
    "<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" style='display:block;z-index:1050'  ng-transclude></div>");
}]);

编辑您可以轻松地从设置为的bootstrap.css类modal（及其子类）中的所有样式中删除-
仅隐藏DOM元素，而将其完全删除。display``none``bootstrap``ui-bootstrap

2020-07-04