为许多不同的图片创建多个模态

Question

我有一个包含许多不同项目（菜单项）的模式。 我想这样做，所以当我单击任何特定菜单项的标题时，会弹出另一个模式，显示所述菜肴的图像。 我遇到的唯一问题是，我必须为每道菜（其中 15 个）创建大量不同的模态。 有没有办法我可以创建一个函数/循环，以便他们只访问附加到所述项目的特定图像？ 我应该为图像创建一个单独的容器吗？ 或者将它们自己添加到项目容器中并将显示设置为无？

这是一个没有太多css或JS的例子吗？ 有什么解决这个问题的最佳方法的想法吗？

 /*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

您不需要为每个图像使用单独的模态。 您只需要一个可以显示不同图像的模式。

使用 javascript，您需要将点击事件监听器添加到所有项目的容器中。 当点击任意item时，获取与该item关联的img元素的src属性，并将这个src属性设置为modal中img的src属性。

这是一个演示，其中我有 3 个图像，根据您单击的图像 label，一次以模态显示。

 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>