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。

确保您使用ui-bootstrap模板（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 your bootstrap.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（及其子类）中将display设置为{{1}的所有样式中删除} - none只隐藏DOM元素，而bootstrap则完全删除它。

Answer 2

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

你只需要输入你的css：

.modal {
display: block;
}

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

Answer 3

我有完全相同的问题。我所做的是修改我在template.html中的内容，即在open-function中使用templateUrl属性提供的.html。

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

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

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

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

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

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

Answer 5

由于一些奇怪的原因，模态的背景高度未设置为填充窗口，要在ui-bootstrap-tpls.js中修复此问题，我转到底部的template/modal/backdrop.html行并添加以下是样式选项'width':'100%', 'height':'100%'

Answer 6

我已升级到bootstrap v3.3.4，现在它适用于我。

Angularjs v1.3.12
UI-自举-0.12.0
ui.bootstrap.tpls-0.12.0

Answer 7

在我的情况下，问题是bower正在安装bootstrap 4而ui-modal支持3.3.7所以你需要检查bower_components上的bootstrap版本

AngularJS bootstrap.ui模式没有显示

7 个答案: