时间戳

首页 > 解决方案 > 如何在同一页面上制作多个 MDB 模态并在每个模态弹出中具有不同的内容？

html - 如何在同一页面上制作多个 MDB 模态并在每个模态弹出中具有不同的内容？

问题描述

如何在同一页面上制作多个 MDB 模态并在每个模态弹出中具有不同的内容？目前，即使我在每个模态体中都有单独的内容，当单击任何一个模态时，最后一个模态的模态体中的内容也会显示出来？我从这里使用了 MDB 模态标记：https ://mdbootstrap.com/docs/jquery/modals/generator/这是为什么？

在此处输入图像描述

模态

这是我的代码：

    <!-- 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 -->

标签： htmlcssangularbootstrap-modalmdbootstrap

解决方案

#basicModalid 用于两种模式。这个值应该是唯一的。

您需要在第二个模态代码中更改此值，例如：

    <!-- 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 -->

推荐阅读