从菜单项触发模态卡，但所有模态卡弹出-HTML、CSS、JS

Question

我仍然无法正确地从导航栏项目中触发模式卡弹出窗口。我已经做了建议的更改，但是当我单击下拉菜单中的导航栏项目时，该div弹出的所有模式卡都会显示出来。

下拉列表中的每个导航栏项目都应链接到一个模式卡，单击该项目时，只有该卡会弹出。无论单击发生在何处，所有模式卡都会层叠出现。

数据目标引用已移动到导航栏项，但所有div modals都会弹出，即使在单击顶部导航栏时也是如此。尝试使用菜单项上的href并将其删除。可能是我遗漏了一些小东西。

    const item = document.querySelector(".navbar-item");
    const modalBg = document.querySelector('.modal-background');
    const modal = document.querySelector('.modal');

    item.addEventListener('click', () => {
      modal.classList.add('is-active');
    });

    modalBg.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />

    <section>
      <nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
        <div class="navbar-brand">
          <a class="navbar-burger" id="burger">
            <span></span>
            <span></span>
            <span></span>
          </a>
        </div>
        <div class="navbar-menu" id="nav-links">
          <div class="navbar-start">
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">Lumber</a>
              <div class="navbar-dropdown">
                <a class=" navbar-item" data-target="#Composite Decking">
                                    Composite Decking
                                </a>
                <a class="navbar-item" data-target="#framingLumber">
                                    Framing Lumber
                                </a>
                <a class=" navbar-item" data-target="Treated Lumber">
                                    Treated Lumber
                                </a>
                <a class="navbar-item" data-target="Plywood">
                                    Plywood
                                </a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </section>

    <!--Modal-->
    <div class="modal is-active" id="modal">
      <div class="modal-background"></div>
      <div class="modal-card" id="framingLumber">
        <header class="modal-card-head">
          <p class="modal-card-title">Framing Lumber</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          <img src="pics/lumberOnline.jpg" alt="">
        </section>
        <footer class="modal-card-foot">
          <p>We can meet your framing lumber needs. Including long length lumber.</p>
        </footer>
      </div>
      <div class="modal-card" id="decking">
        <header class="modal-card-head">
          <p class="modal-card-title">Composite Decking</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          <p>Insert picture of composite decking here.</p>
        </section>
        <footer class="modal-card-foot">
          <p>Less maintenance, more durable and a longer life. Let composite decking make your life easier!
          </p>
        </footer>
      </div>
      <div class="modal-card" id="treatedLumber">
        <header class="modal-card-head">
          <p class="modal-card-title">Treated Lumber</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          <img src="pics/treatedLumberOnline_cropped.jpg" alt="">
        </section>
        <footer class="modal-card-foot">
          <p>Use pressure treated lumber for jobs where the lumber will be exposed to weather.
          </p>
        </footer>
      </div>
      <div class="modal-card" id="plywood">
        <header class="modal-card-head">
          <p class="modal-card-title">Plywood</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          <img src="pics/plywoodOnline_cropped.jpg" alt="">
        </section>
        <footer class="modal-card-foot">
          <p>Different types of plywood.....
          </p>
        </footer>
      </div>
    </div>

Answer 1

使用引导V4。6.x

modalBg.addEventListener('click', () => {
    modal.modal('show');
 });

modalBg.addEventListener('click', () => {
  modal.modal('hide');
});

使用引导V5。0.x

 modalBg.addEventListener('click', () => {
     modal.show();
 });

 modalBg.addEventListener('click', () => {
      modal.hide();
 });