AngularJS bootstrap.ui 模态未显示

Posted 2023-02-19

【中文标题】AngularJS bootstrap.ui 模态未显示

【英文标题】：AngularJS bootstrap.ui modal not showing

【发布时间】：2013-12-13 20:31:18

【问题描述】：

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

【问题讨论】：

我怀疑您使用的是 Bootstrap3 CSS，并且当前发布版本仅与 Bootstrap 2.3 兼容。如果你想在 Bootstrap3 中使用这个库，你需要在你身边构建 bootstrap3 分支（直到它被正式发布和支持）。

【参考方案1】：

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

确保您使用的是带有模板 (ui-bootstrap-tpls.js) 的 ui-bootstrap，因为您可能会这样做。 在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 将其完全移除。

【讨论】：

当我检查 DOM 时，我可以看到没有显示。当我手动删除显示元素时，文本出现在背景中。我尝试更改模板/modal/window.html 以匹配您在此处的内容，但这并没有改变显示。

@Steve 所以你也必须改变你的css...（我不记得我到底做了什么——但至少你现在知道出了什么问题）

@Steve 你使用什么版本的引导程序？ （顺便说一句。我编辑了我的答案）

感谢您帮助我。 bootstrap.css 为 3.0.2，bootstrap.tpls.js 为 .0.7.0。我已经编辑了 .js 和 .css ，现在当模式打开时，它占据了整个屏幕并且是透明的，与它背后的东西融合在一起。我发布了我的测试站点，如果您想单击隐私政策并查看问题。 stevesdevbox.azurewebsites.net

@Steve 看着它。尝试像这样改进模板的结构：<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> ...

【参考方案2】：

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

你只需要放入你的css：

.modal 
display: block;

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

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案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 时，它工作正常！

【讨论】：

对我来说，我只需要删除第一个 div（模态淡入淡出）并保留 modal-dialog 和 modal-content，然后它就为我工作了。

【参考方案6】：

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

【参考方案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 类的整个元素都会被删除，而不管这个类是否存在。

【讨论】：

为什么这不是答案？