作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在玩 Angular 模态 ui 对话框。我想知道有什么方法可以让它居中?我发现了一个类似的问题:
Twitter Bootstrap - Center Modal Dialog
但无法使其工作,因为我对 angular 比较陌生。这是来自angular ui components页面的模态对话框plunker的简化版本:
http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("ok");
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
};
最佳答案
您可以使用 windowClass
为模态窗口指定样式类。创建时的属性 modalInstance
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'center-modal'
});
.center-modal {
position: fixed;
top: 10%;
left: 18.5%;
z-index: 1050;
width: 80%;
height: 80%;
margin-left: -10%;
}
关于angularjs - 中心 Angular 模态用户界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23170392/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!