нг-бустрап модал без полноэкранного режима - PullRequest
Новая
       46

нг-бустрап модал без полноэкранного режима

1 голос
/ 05 апреля 2019

Я столкнулся с проблемой, что мой модал всегда полноэкранный.

Модальные вызовы внутри шаблона: 

 <button type="button"
        class="btn btn-danger"
        (click)="openRejectModal(rejectTemplate)">Reject</button>

нг-шаблон в конце HTML: 

<ng-template #rejectTemplate>
  <app-reject-modal (close)="closeModal()"
    (send)="sendReject()"></app-reject-modal>
</ng-template>

модальный компонент html: 

<div class="modal-container">

  <div class="modal-header">
    <h4 class="modal-title"
      id="modal-basic-title">Profile update</h4>
    <button type="button"
      class="close"
      aria-label="Close"
      (click)="close.emit()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control"
          id="exampleFormControlTextarea1"></textarea>

      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button"
      class="btn btn-outline-dark"
      (click)="modal.close('Save click')">Save</button>
  </div>
</div>

class="modal-container" - это просто пользовательская CSS для скрипки на данный момент: (width: 60%, height:60%)

модальная функция открытия: 

 openRejectModal(template) {
    this.modalService.open(template, { size: 'lg', backdrop: true });
  }

объект параметров только что добавлен, но размер и фон не изменят ни черта ...: (

Я бы хотел, чтобы мой модал был таким, как показано в: документация ng-boostrap

Но у меня всегда полноэкранный режим. Чем можно решить эту проблему?

Мой модал выглядит так: Pic

1 Ответ

1 голос
/ 05 апреля 2019

Согласно документации *1001* API NgBoostrap, мы можем передать свойство windowClass с пользовательским классом, который будет добавлен к модальному.

Здесь, в методе, который вызывает открытие модального окна, мы передадим класс custom-modal свойству windowClass: 

open(content) {
  this.modalService.open(template, {windowClass : 'custom-modal'})
}

Добавьте следующее в свой CSS, чтобы перезаписать ширину. Вы можете заменить 400px любым значением, которое считаете нужным. 

.custom-modal .modal-dialog {
  max-width: 400px;
}

Возможно, вам понадобится добавить вышеперечисленное в ваш глобальный CSS (или файл style.css, который находится на том же уровне каталогов, что и ваш index.html), поскольку он может работать или не работать, если вы поместите его в css вашего компонента. .

...