How to change the position of modals in ng-bootstrap

user_4332851 0
Viewed 12417

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.

ng-bootstrap bootstrap-4 angular css
3 Answers

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%);
}
user_62967130

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;   
}
`]
user_20308660

If you want to center it vertically they have a centered option you can use:

this.modalService.open(your_modal, { centered: true })
user_22887110
Related