Creating multiple Modals for many different pictures

Question

I have a modal that contains many different items(Menu items). I want to make it so when I click the heading of any specific menu item, another modal pops-up showing the image of said dish. The only issue I run into, is that I would have to create a ton of different modals for each item dish(15 of them). IS there a way I can create a function/loop fthem so they only access a soecific image attatched to said item? Should I create a seperate container for the images? Or add them to the item containers themselves and set the display to none?

Here is an example without much css or the JS with it? Any thoughts of the best way to tackle this?

 /*This is the background/ not the box itself*/.menu { display: block; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: none; background-color: rgba(0, 0, 0, .4); } /*Menu Content Box*/.menuContent { background-color: #f1e3cb; margin: 5% auto; border: 1px solid #888; width: 50%; height: 80%; border-radius: 5px; font-family:'IM Fell French Canon SC', serif; font-weight: 600; overflow-y: scroll; &::-webkit-scrollbar { width: 10px; } &::-webkit-scrollbar-track { background: #f1e3cb; } &::-webkit-scrollbar-thumb { background: #888; }.menuHeader { text-align: center; }.menu-items { display: flex; flex-direction: row; justify-content: space-evenly; text-align: center; margin: 20px 0 0; > div { width: 33%; margin: 0 5px; } p{ text-align: left; &:hover { cursor: pointer; transform: scale(1.1); transform-origin: left; } }.item { margin-top: 20px; align-self: center; } } } /*Close button*/.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; padding-right: 10px; overflow: auto; &:hover, &:focus { color: black; text-decoration: none; cursor: pointer; } }

 <;--Menu Modal--> <div id="myMenu" class="menu"> <:--Menu Content--> <div class="menuContent"> <span class="close">&times,</span> <div class="menuHeader"> <h1>Menu</h1> </div> <div class="menu-items"> <div class="Appetizers"> <h2>Appetizers</h2> <div class="item"> <p>Sardine canapés,</p> <small>Roasted sardines, boiled egg yolk. whole olives: and a choice of cheese stacked on our signature house bread. </small> </div> <div class="item"> <p>Crab Stuffed with Crayfish:</p> <small>Fried crab and vegetables stuffed into large crayfish,</small> </div> <div class="item"> <p>Shrimp Canapés.</p> <small>Lemon fried shrimp: cucumber slicies atop house bread served with a side of our shrimp sauce. </small> </div> <div class="item"> <p>Préfou:</p> <small>House baguette stuffed with garlic butter and parsely,</small> </div> <div class="item"> <p>Moules farcies,</p> <small>baked mussels stuffed with garlic butter. parsley. shallots and nutmeg: Topped with parmesan cheese and breadcrumbs: </small> </div> </div> <div class="Entrees"> <h2>Entrees</h2> <div class="item"> <p>Lamb chops & Cognac dijon,</p> <small>Juicy lamb elegantly served with our signature Dijon sauce</small> </div> <div class="item"> <p>Chicken Cordon Bleu.</p> <small>Chicken stuffed with ham and cheese sauce: served atop a bed of roasted lettuce,</small> </div> <div class="item"> <p>Coq au vin,</p> <small>Chicken drums braised with wine. mushrooms, pork and garlic butter. Topped with green onion and chili: and a side of roasted scallops. </small> </div> <div class="item"> <p> Ratatouille.</p> <small>Award winning dish: Shallow fried vegetables layered in our signature baked casserole. </small> </div> <div class="item"> <p>Roast Chicken:</p> <small>Cuts of chicken roasted in garlic butter and an herby crust served with roasted baby spinach.</small> </div> <div class="item"> <p>Duck a l'orange:</p> <small>Duck legs and breast served with fresh orange sauce.</small> </div> <div class="item"> <p>Croque-Monsieur.</p> <small>Baked ham and cheese with velvety bechamel: Served with egg upon request.</small> </div> </div> <div class="Desserts"> <h2>Desserts</h2> <div class="item"> <p>Apricot and Almond Galette:</p> <small>Fruity galettes stuffed with an almond cream.</small> </div> <div class="item"> <p>Honey Hazelnut Financiers:</p> <small>Buttery brown cakes tops with a berry-hazelnut topping.</small> </div> <div class="item"> <p>Caramelized-Honey Brulee:</p> <small>House Brulee coated with a caramelized layer of torched honey.</small> </div> </div> </div> </div>

Answer 1

You don't need a separate modal for each image. You just need a one modal that will display different images.

Using javascript, you need to add a click event listener to the container of all the items. When any items is clicked, get the src attribute of the img element associated with that item and set this src attribute as the src attribute of the img in the modal.

Here's a demo in which i have 3 images which are displayed in a modal one at a time depending on which image label you clicked on.

 const modal = document.getElementById('modal'); const modalContainer = document.querySelector('.modal-container'); const container = document.getElementById('container'); container.addEventListener('click', (event) => { if (event.target.matches('span')) { const src = event.target.nextElementSibling.getAttribute('src'); modal.children[0].setAttribute('src', src); modalContainer.classList.add('showModal'); } }); modalContainer.addEventListener('click', () => { modalContainer.classList.remove('showModal'); })

 body { margin: 0; } img { display: none; } div span { display: inline-block; margin: 5px; font-size: 1.2rem; cursor: pointer; text-decoration: underline; color: blue; }.modal-container { display: none; position: fixed; background: #222; width: 100vw; height: 100vh; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); }.modal-container img { display: inline-block; }.showModal { display: flex; }

 <div class="modal-container"> <div id="modal"> <img src="" /> </div> </div> <div id="container"> <div> <span>Show Image 1</span> <img src="https://picsum.photos/id/1/200/" /> </div> <div> <span>Show image 2</span> <img src="https://picsum.photos/id/20/200/" /> </div> <div> <span>Show image 3</span> <img src="https://picsum.photos/id/30/200/" /> </div> </div>