Angular модальное всплывающее окно появляется внизу - PullRequest
Новая
       26

Angular модальное всплывающее окно появляется внизу

0 голосов
/ 12 марта 2020

Я пытаюсь создать модальное всплывающее окно с Angular 5+ и Bootstrap. Проблема в том, что вместо всплывающего окна оно отображается внизу, как если бы оно было продолжением страницы. Он также добавляет себе белый фон.

enter image description here

Теперь, если добавить этот CSS код: 

ngb-modal-window[role="dialog"] {
  display:flex;
  position: fixed;
  left: 400px;
  top: 200px;   
}

Это исправлено и в конечном итоге выглядит, как это было задумано. Проблема в том, что это влияет на все элементы ngb-modal-window[role="dialog"] страницы, и мне нужно только это для одного. Сталкивались ли вы с чем-то подобным раньше?

enter image description here

Вот как я создаю всплывающее окно:

HTML модального компонента: 

<div class="modal-header">
  <h1 class="modal-title">Messages Popup</h1>
  <button aria-label="Close" data-dismiss="modal" class="close" type="button" (click)="activeModal.dismiss('closed')"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
  <h5>test</h5>
</div>
<div class="modal-footer">
  <button data-dismiss="modal" class="btn btn-secondary float-left" type="button" (click)="activeModal.dismiss('closed')">Done</button>
</div>

messagesComponent.ts: 

export class JhiMessagesComponent {
  constructor(private modalService: NgbModal) {

  }

  showMessagesModal(){
    const modalRef = this.modalService.open(JhiMessagesModalComponent);
  }
}

messages-modal.component.ts: 

export class JhiMessagesModalComponent implements OnInit {
  constructor(public activeModal: NgbActiveModal) {

  }

1 Ответ

0 голосов
/ 12 марта 2020

Вы на правильном пути!

Я бы просто добавил CSS и HTML как это (или даже селектор после модального класса) 

<div class="modal-body pop-out">
  <h5>test</h5>
</div>

А затем используйте CSS: 

.pop-out {
  display:flex;
  position: fixed;
  left: 400px;
  top: 200px;   
}

Я добавлю, это правильный маршрут, потому что у вас та же модальная структура с различными требованиями, указав необязательный CSS, добавив класс, когда вам нужно другой взгляд проясняет, откуда взялась разница; И не меняет поведение по умолчанию.

...