AngularJS bootstrap.ui模式不显示 [英] AngularJS bootstrap.ui modal not showing

问题描述

我试图使用显示AngularJS bootstrap.ui一个模式对话框。当我做了$ modal.open（...）屏幕灰色出来，从我的templateUrl的HTML从服务器调用，但没有模态显示。当我点击的灰色区域，模态关闭，即灰色区域将消失，画面看起来正常了。我想不通，为什么我没有看到任何模式的屏幕。

I am trying to display a modal dialog using AngularJS bootstrap.ui. When I do a $modal.open(...) the screen grays out and the html from my templateUrl get called from the server, but no modal displays. When I click on the gray area, the modal "closes", that is the gray area goes away and the screen looks normal again. I cannot figure out why I don't see any modal screen.

我想按照这个教程：
角指令

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

I am using Visual Studio 2013, MVC 5, AngularJS 1.2.2.

我使用随附VS项目bootstrap.css。它有它的模式类。我没有得到从JavaScript控制台报告的错误。我的应用程序定义如下：

I am using bootstrap.css that comes with the VS project. It has the modal classes in it. I am getting no error reported from the Javascript console. My app is defined as follows:

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>

任何想法，为什么我的屏幕变灰，则/隐私资源是越来越加载，并且点击灰色的时候，屏幕恢复正常，但似乎没有模态？

Any idea why my screen is graying out, the /Privacy resource is getting loaded and the screen returns to normal when the gray is clicked, but no modal appears?

推荐答案

有相同的症状前一阵子。不记得确切的细节，但我认为主要的问题是，模式的实例始终显示：无

Have exactly the same symptoms while ago. Do not remember the exact details, but I think the main problem was that the instance of the modal has always display:none.

1. 请确保您使用的是 UI-引导使用模板（ UI的引导-tpls.js ） - 因为有花白出你可能做的效果


2. 在 UI的引导-tpls.js 去在最底层的模式模板（你可以找到它由模板/莫代尔/ window.html），并添加有风格=显示：块。如果将不利于试图匹配你的 bootstrap.css`模板的CSS类。

1. Make sure that you are using the ui-bootstrap with templates (ui-bootstrap-tpls.js) -- as there is the effect of graying-out you probably do.
2. In ui-bootstrap-tpls.js go to the modal template at the very bottom (you can find it by: "template/modal/window.html") and add there style="display:block". If it will not help try to match css classes of the template against yourbootstrap.css`.

我亲自使用 bootstrap3 的一些定制版，现在已经得到这些作为模板：

I personally used some custom version of bootstrap3, and now have got these as template:

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 类的所有样式删除模式（和它的子类），其中显示设置为无 - 引导只是隐藏的DOM元素，而 UI-引导完全去除。

EDIT You can easily remove from your bootstrap.css all styles in class modal (and its sub-classes) where display is set to none -- bootstrap just hides the DOM element, whereas ui-bootstrap removes it completely.

这篇关于AngularJS bootstrap.ui模式不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！