Расположение диалогового окна в многозонной компоновке в Angular / Bootstrap-4

Question

Я работал над угловым приложением, которое содержит мульти макет, т.е. боковую панель и основной макет.Я хочу расположить диалоговое окно в основном макете, но оно отображается поверх общего макета.

Как отобразить его только в середине основного макета.

Answer 1

Причина, по которой модальное окно (или диалоговое окно) покрывает весь вид, заключается в том, что класс .modal использует position:fixed с одинаковыми полями с обеих сторон (через margin: auto) и определенным фиксированным max-width.

Вы не передали свой код, поэтому я создал боковую панель, которая занимала бы 20% ширины экрана;это означает, что оставшиеся 80% будут нашей «основной версткой».Теперь, чтобы убедиться, что модальный режим строго находится в пределах «основного макета», мы добавили поле слева в 20% (что в точности соответствует ширине, которую мы присвоили боковой панели);

релевантно CSS :

  .sideBar{width:20vw; background:lightblue; height:100vh;}
  .mainArea{ width:80vw; height:100vh;}
  ::ng-deep .modal{margin-left:20vw;}

релевантно HTML :

<code><div class='row'>
    <div class='sideBar'>
    </div>
    <div class='mainArea'>
        <ng-template #content let-modal>
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}

полная работа стек-блиц доступен здесь