我试图学习Angular和模态只是不起作用。模态将显示,但模态内容div不会增长以包含所有内容。相反,内容只是在一个非常短的模态的底部。请参阅下面的图片了解它的作用:
三个迷你段落和下面的链接应该在模态中。
这是"登录"的控制器。页:
MyApp.controller('loginController', ['$scope', '$location', '$translate', '$http', 'browserCheckService', 'modalService', function ($scope, $location, $translate, $http, browserCheckService, modalService) {
'use strict';
$scope.checkBrowser = function() {
if (browserCheckService.browserCheck() === false) {
try {
var settings = {
title: 'Incompatible Browser Warning',
size: 'lg',
templateUrl: 'Pages/browserReject.html',
controller: 'browserRejectController'
}
modalService.DisplayModal(settings);
} catch (err) {
alert(err.message);
}
}
};
$scope.checkBrowser();
}]);
这是browserReject的控制器:
MyApp.controller('browserRejectController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
'use strict';
$scope.close = function () {
$uibModalInstance.dismiss();
}
}]);
这是modalService:
angular.module('MyApp').service('modalService', ['$uibModal', function ($uibModal) {
'use strict';
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
size: settings.size
});
}
};
}]);
browserCheckService只是设置为false,因此我可以测试模态。
这是browserReject.html内容:
<div id="modalHeaderContainer">
<div id="title">Incompatible Browser Warning</div>
<div id="closeButton">
<button type="submit" class="close" ng-click="close()">X</button>
</div>
</div>
<hr />
<div id="jr_outer">
<div id=jr_inner">
<div id="jr_center">
<p translate={{'application__browser_reject_message'}}"></p>
<ul>
<li>
<a target="_blank" href="http://www.google.com/chrome/>Google Chrome</a>
</li>
<li>
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/>Firefox</a>
</li>
<li>
<a target="_blank" href="http://www.apple.com/safari/>Safari</a>
</li>
<li>
<a target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>
</li>
</ul>
</div>
</div>
</div>
这是我的CSS,因为它目前代表模式:
/* CSS for modal settings */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
#modalHeaderContainer {
width:100%;
height: 1.5em;
}
#title {
float:left;
font-size:1.7em;
padding-left:.5em;
}
#closeButton {
float:right;
padding-top:.5em;
padding-right:.5em;
}
/* End CSS for modal settings */
我已阅读帖子here和here以及其他几篇文章,似乎没有什么比较合适。我觉得好像我忽略了一些非常简单但却无法找到它的东西。我尝试将模态内容的max-height设置为100%,但这也不会改变显示。
答案 0 :(得分:2)
你应该通过在css中执行以下操作来覆盖默认的.modal-window:
.mynewModal-modal-window .modal-window {
width: 100%;
height: 100%;
}
并将其'class作为参数添加到$ uibModal的打开方法:
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
windowClass: 'myNewModal-modal-window',
size: settings.size
});
}
};
我还没有找到一种方法来通过控制器覆盖模态内容:((很高兴有类似的东西)
答案 1 :(得分:0)
不太合适,但是正在寻找uibmodal CSS溢出问题答案的人们将需要此:
信不信由你,如果您未将高度设置为的任何动态设置为 overflow:hidden或overflow:scroll ,例如直角转发器或在jquery中注入的内容,实际上看起来只是模态未拉伸,而实际上它确实按预期运行。