Как сделать несколько модальных окон MDB на одной странице и иметь разный контент в каждом всплывающем окне? - PullRequest
Новая
       39

Как сделать несколько модальных окон MDB на одной странице и иметь разный контент в каждом всплывающем окне?

1 голос
/ 06 мая 2020

Как мне сделать несколько модальных окон MDB на одной странице и иметь разный контент в каждом модальном всплывающем окне? В настоящее время содержимое модального тела последнего модального окна будет отображаться при нажатии любого из модальных окон, даже если у меня есть отдельный контент в каждом модальном теле? Я использовал модальную разметку MDB отсюда: https://mdbootstrap.com/docs/jquery/modals/generator/ Почему это?

enter image description here

Modals

Вот мой код: 

    <!-- Modal 1 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 1
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 1</h4>
          </div>
          <div class="modal-body">
            Content 1
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 1 -->
    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

1 Ответ

1 голос
/ 07 мая 2020

#basicModal id используется в обоих модальных окнах. Это значение должно быть уникальным.

Вам необходимо изменить это значение во втором модальном коде, например: 

    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="secondModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #secondModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="secondModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->
...