Javascript AngularJS bootstrap.ui模式未显示

我正在尝试使用AngularJS bootstrap.ui显示一个模式对话框。当我执行$modal.open（…）时，屏幕变灰，服务器会调用来自templateUrl的html，但不会显示任何模式。当我点击灰色区域时，模式“关闭”，即灰色区域消失，屏幕看起来再次正常。我不明白为什么我看不到任何模式屏幕

我正在尝试遵循本教程：

我使用的是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();
    };
}

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

我的标记是：

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

隐私政策

---

你知道为什么我的屏幕变灰了吗？

与之前的症状完全相同。当单击灰色时，/Privacy资源正在加载，屏幕恢复正常，但没有出现模式。我不记得确切的细节，但我认为主要的问题是model的实例总是

display:none

确保将

ui引导程序

与模板一起使用（

ui引导程序tpls.js

）——因为可能会出现灰显效果

在

ui bootstrap tpls.js

中，转到最底部的

modal

模板（您可以通过“template/modal/window.html”找到它），并在那里添加

style=“display:block”。如果没有帮助，请尝试将模板的css类与您的

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>");
}]);

angular.module（“template/modal/background.html”，[]）。运行（[“$templateCache”，函数（$templateCache）{
$templateCache.put（“template/modal/background.html”，
"");
}]);
angular.module（“template/modal/window.html”，[]）。运行（[“$templateCache”，函数（$templateCache）{
$templateCache.put（“template/modal/window.html”，
"");
}]);

---

编辑您可以轻松地从

引导中删除。css

类

模式

（及其子类）中的所有样式，其中

显示

设置为

无

-

引导

仅隐藏DOM元素，而

ui-bootstrap

将其完全删除。

这与ui.bootstrap和bootstrap 3.0不兼容

您只需输入css：

.modal {
display: block;
}

---

你可以看到这篇文章来了解更多细节：。

出于某种奇怪的原因，模态的背景高度没有设置为填满窗口，为了在

ui bootstrap tpls.js

中解决这个问题，我转到底部的

模板/modal/background.html

行，在样式选项中添加了以下内容

'width'：'100%，“高度”：“100%”

我升级到bootstrap v3.3.4，现在它适合我

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

---

我也有同样的问题。我所做的修复工作是更改template.html中的内容，template.html是open函数中

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中只剩下

和一些模式标记
，效果很好
 在我的例子中，问题是bower正在安装bootstrap 4，并且ui模式支持3.3.7，因此您需要检查bower_组件上的bootstrap版本
对于我来说（使用bootstrap 4使用visual studio开发）的问题是bootstrap类
。淡入：不（.show）
定义
不透明度：0
。使用代码检查器禁用这个类，我可以看到模态将显示

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

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();
    };
}

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

通常，将show类添加到整个窗口将意味着连续显示模式。当动态加载页面时，这不是问题，因为当用户单击离开模式时，
.show
类的整个元素将被删除，而不管该类是否存在。
我检查DOM时可以看到显示为无。手动删除显示元素时，文本显示在背景中。我试图更改模板/modal/window.html以匹配此处的内容，但这并没有改变显示。@Steve，因此您也必须更改
css
。。。（我不记得我到底做了什么——但至少你现在知道错在哪里了）@Steve你用的是什么版本的bootstrap？（顺便说一句，我编辑了我的答案）谢谢你的帮助。css是3.0.2，bootstrap.tpls.js是.0.7.0。我已经编辑了.js和.css，现在当模态打开时，它占据了整个屏幕，是透明的，与它后面的内容混合在一起。我发布了我的测试站点，如果您想单击隐私策略并查看问题@史蒂夫看了看。尝试这样改进模板的结构：
…
我怀疑您使用的是Bootstrap3 CSS，当前版本仅与Bootstrap2.3兼容。如果你想在Bootstrap3中使用这个库，你需要在你这边建立Bootstrap3分支（直到它被正式发布和支持）。对我来说，我只需要删除第一个div（模态淡入淡出），保留模态对话框和模态内容，然后它就对我起作用了。为什么这不是答案？