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

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

Answer 1

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

使用 javascript，您需要向所有项目的容器添加一个单击事件侦听器。单击任何项目时，获取与该项目关联src的img元素的属性，并将该src属性设置为模态中的src属性img。

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

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>