AngularJS bootstrap.ui模式没有显示

Question

我试图使用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资源被加载,点击灰色时屏幕恢复正常,但没有模态出现？

Answer 1

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

你只需要输入你的css:

.modal {
display: block;
}

你可以看到这篇文章了解更多细节:带有UI-Bootstrap的AngularJs:修复损坏的对话框.

Answer 2

我有完全相同的问题.我所做的就是改变我在template.html中的内容,templateUrl即open-function中属性提供的.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并且只And here some modal markup留下了template.html它工作正常!

Answer 3

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

1. 确保你使用ui-bootstrapwith templates(ui-bootstrap-tpls.js) - 因为你可能会做灰显的效果.
2. 在ui-bootstrap-tpls.js转到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元素,然后完全删除它.displaynonebootstrapui-bootstrap

Answer 4

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

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

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

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