Center Angular modal ui

Question

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question: Twitter Bootstrap - Center Modal Dialog

but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:

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>

js:

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");
  };
};

My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.

http://stackoverflow.com/a/25160044/900284 – Frank Myat Thu Dec 04 '15 at 09:43 — Frank Myat Thu, Dec 04 '15 at 09:43

score 29 · Answer 1 · edited Dec 19 '14 at 02:32

29

You can specify the style class for the modal window by using windowClass attribute while creating modalInstance

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      windowClass: 'center-modal'
    });

then in your css you can specify the definition for .center-modal like,

.center-modal {
    position: fixed;
    top: 10%;
    left: 18.5%;
    z-index: 1050;
    width: 80%;
    height: 80%;
    margin-left: -10%;
}

or specify anything based on your needs

edited Dec 19 '14 at 02:32

John Sparwasser

1,015
13
26

answered May 10 '14 at 07:50

M22an

1,242
1
18
35

6

The sample css will indeed relocate the modal dialog, but breaks the click-outside-dialog-to-close behavior by resizing/relocating the modal wrapper around the dialog as well. Targeting .modal-dialog, as described in http://stackoverflow.com/a/21312755, will avoid this issue. – mygzi Apr 19 '15 at 21:57
@M22an: Is there a way to dynamically change the "windowClass" while the modal is open? – me_digvijay Sep 24 '15 at 06:31
@me_digvijay, maybe you can try using jQuery if you want to alter the styles. – M22an Sep 24 '15 at 11:12

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

This approach works with any modal size.

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

The original answer has an example with Plunker.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 18 '16 at 15:58

robsonrosa

2,548
5
23
31

Center Angular modal ui

2 Answers2

Linked