AngularJS bootstrap.ui 模态未显示

Question

我正在尝试使用 AngularJS bootstrap.ui 显示一个模式对话框。当我执行 $modal.open(...) 时，屏幕变灰，并且我的 templateUrl 中的 html 从服务器被调用，但没有模式显示。当我点击灰色区域时，模态“关闭”，即灰色区域消失，屏幕恢复正常。我无法弄清楚为什么我没有看到任何模式屏幕。

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

我正在使用 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 资源正在加载，单击灰色时屏幕恢复正常，但没有出现模式？

Answer 1

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

1. 确保您使用的是带有模板 (ui-bootstrap-tpls.js) 的 ui-bootstrap，因为您可能会这样做。
2. 在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>");
}]);

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

Answer 2

这与 ui.bootstrap 和 bootstrap 3.0 不兼容。

你只需要放入你的css：

.modal {
display: block;
}

您可以查看此帖子了解更多详情：AngularJs with UI-Bootstrap: Fix broken dialog boxes。

Answer 3

由于某种奇怪的原因，模态的背景高度没有设置为填充窗口，为了在ui-bootstrap-tpls.js 中解决这个问题，我去了底部的template/modal/backdrop.html 行并将以下内容添加到样式选项'width':'100%', 'height':'100%'

Answer 4

我升级到 bootstrap v3.3.4，现在它对我有用。

• Angularjs v1.3.12
• ui-bootstrap-0.12.0
• ui.bootstrap.tpls-0.12.0

Answer 5

我遇到了完全相同的问题。我所做的修复它是更改我的 template.html 中的内容，该 .html 与 open-function 中的 templateUrl 属性一起提供。

我在那里有完整的模态标记：

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">And here some modal markup</div></div></div>

当我删除前三个 div 并且在 template.html 中只剩下 And here some modal markup 时，它工作正常！

Answer 6

在我的情况下，问题是 bower 正在安装 bootstrap 4 并且 ui-modal 支持 3.3.7，因此您需要检查 bower_components 上的 bootstrap 版本

Answer 7

我的问题（使用 bootstrap 4 使用 Visual Studio 进行开发）是引导类 .fade:not(.show) 定义了 opacity: 0。使用代码检查器禁用此类，我可以看到模式会显示。

但是，为了避免修改供应商文件（即bootstrap.css 文件），我只是扩展了调用模态的函数以将“显示”类添加到模态页面。在您的示例中，如下所示：

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

通常，将 show 类添加到整个窗口意味着模态将连续显示。当页面动态加载时，这不是问题，因为当用户点击离开模式时，带有.show 类的整个元素都会被删除，而不管这个类是否存在。