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

Question

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

下拉菜单中的每个导航栏项目都应链接到一个模式卡，并且在单击该项目时只会弹出该卡。无论点击发生在哪里，所有的模态卡片都会弹出堆叠在一起。

数据目标引用已移至导航栏项目，但所有 div 模态弹出窗口，即使单击顶部导航栏也是如此。尝试使用菜单项上的 href 并将其删除。这可能是我缺少的一些小东西。

JavaScript

    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');
    });

HTML

    <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();
 });