How to change the position of modals in ng-bootstrap

Question

I can’t figure out the way of showing the modal in any place but default one, centered at the top, which is, as to me, the ugliest place to show modals.

Could anybody help with it?

Firstly, I’d like to show it somewhere in the middle.

I was trying to change the css in the modal’s component style sheet, but unsuccessfully. And I don't want to changes the styles for all the modals.

Solution 1

You can add your own custom class to the modal dialog using the config class in your open modal function

  openModal(modal_id) {
     this.modalService.open(modal_id, { windowClass: 'custom-class' });
  }

Above results in the following html structure:

<div class="modal custom-class">
    <div class="modal-dialog">
          <div class="modal-content">
                ...
          </div>
    </div>
</div>

You custom css can have the following code:

.custom-class {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Solution 2

Another approach can be. As it can be seen in bootstrap modal docs, modals are using fixed position. you can override the default bootstrap class, which is applied using window-class and use css to position as you can see in this example

styles: [`
.dark-modal .modal-content {
  background-color: #292b2c;
  color: white;
  top:200px;
}
.dark-modal .close {
  color: white;   
}
`]