Menu
Recently I am learning angularjs. I have used bootstrap before. With jquery, I can easily change the position of the modal component position to make it vertical align. Now with angularjs, it seems not very easy to do that. Here is a plunker link of ui bootstrap modal, Does anyone know how to make it vertical align?
ui bootstrap modal component
1.index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
This is modal body
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
</body>
</html>
2.example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
972
Answer: Use the CSS margin-top Property But you can align it in the middle of the page vertically using a simple JavaScript trick as described in the example below. This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.
Centering the modal vertically can be done if you use CSS calc() function on the top CSS property. Let's say that the modal has a height of 600px. Using the vh unit with a value of 50 will get you the midpoint on the vertical height of the screen. Then you just need to subtract half of the height of the modal element.
From an AngularJS perspective, a modal window is nothing more than a Controller than manages a View-Model, interacts with Services, and is rendered by a View. The same it true for every other UI-oriented component in your AngularJS application.
If I understand your problem correctly, you can acheive the vertical center alignment just by using CSS. Add following CSS:
.modal {
text-align: center;
padding: 0!important;
}
.modal::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
I have setup a Plunker forked from yours to make a demonstration.
You can find following links Helpful
Hope this helps. Cheers !!
192
The above solutions will apply to all the modals. If you want to apply to selective modals then follow the below given solution.
The CSS uses .class-a.class-b and .class-a .class-b selector and need to set option windowClass.
.center-modal.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.center-modal.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.center-modal .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
var modalInstance = $uibModal.open({
templateUrl: 'modules/users/client/views/authentication/login.client.view.html',
windowClass: "center-modal"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
