Angularjs ui bootstrap: how to vertical center modal component?

Question

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

Answer 1

You can use windowTopClass property in the object argument for open method.

https://angular-ui.github.io/bootstrap/

$uibModal.open({
  ...
  ...
  windowTopClass: "modal-center-override"
});

with the respective CSS class override

.modal-center-override {
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;  
}

Answer 2

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

Answer 3

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

1. Bootstrap 3 modal vertical position center
2. Codepen Emaple

Hope this helps. Cheers !!