I am still having problems with getting a modal card popup to trigger from a navbar-item correctly. I have made the suggested changes but when I click the navbar item from the drop down, all of the modal cards for that div popup.
Each of the navbar-items on the drop down should link to one modal card and only that card should pop up when the item is clicked. Regardless of where the click takes place, all of the modal cards popup stacked on top of each other.
The data-target reference has been moved to the navbar item but all of the div modals popup, even when the top navbar is clicked. Tried with the href on the menu item and with it removed. It is probably something small that I am missing.
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>