ps0604 ps0604 - 1 month ago 27
AngularJS Question

Center Angular UI Modal in the middle of the screen

I followed the solution taken from here but it's not working. I need to center the modal right in the middle of the screen, both horizontally and vertically. I attempted in this plunk but it's not working, any ideas?

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
windowClass: 'app-modal',
});
});


HTML

<style>
.app-modal .modal-content {
width: 360px;
height: 200px;
}
</style>

<script type="text/ng-template" id="myModalContent.html">

<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>

<p>Some text</p

</script>

Answer

In your css, try this:

.modal-dialog {
    position: absolute;
    top: 50%;
    /*half of the modal height*/
    margin-top: -100px;
    left: 50%;
    /*half of the modal width*/
    margin-left: -180px;
}