AngularJS bootstrap.ui模态未显示

AngularJS bootstrap.ui modal not showing

本文关键字：显示 模态 ui bootstrap AngularJS      更新时间：2023-11-10

我正在尝试使用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();
    };
}

我的标记是：

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

你知道为什么我的屏幕变灰了，/Privation资源被加载了，当点击灰色时屏幕恢复正常，但没有出现模式吗？

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

你只需要把你的css：

.modal {
display: block;
}

您可以看到这篇文章了解更多详细信息：AngularJs与UI引导：修复损坏的对话框。

我遇到了完全相同的问题。我修复它的方法是更改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中只剩下And here some modal markup时，它运行得很好！

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

  1. 请确保您使用的是带有模板的ui-bootstrap（ui-bootstrap-tpls.js），因为可能会产生灰显效果
  2. 在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>");
}]);

EDIT您可以轻松地从bootstrap.css中删除类modal（及其子类）中的所有样式，其中display设置为none——bootstrap只是隐藏DOM元素，而ui-bootstrap则完全删除它。

对我来说（使用bootstrap 4与visualstudio一起开发）的问题是bootstrap类.fade:not(.show)定义了opacity: 0。使用代码检查器禁用这个类，我可以看到模态会显示出来。

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

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

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

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

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

  • Angularjs v13.12
  • ui-钢带-0.12.0
  • ui.bootstrap.tpls-0.12.0

在我的案例中，问题是bower正在安装bootstrap 4，ui modal支持3.3.7，因此您需要检查bower_components 上的bootstrap版本

相关文章：