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

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) => {&nbsp; if (event.target.matches('span')) {&nbsp; &nbsp; const src = event.target.nextElementSibling.getAttribute('src');&nbsp; &nbsp; modal.children[0].setAttribute('src', src);&nbsp; &nbsp; modalContainer.classList.add('showModal');&nbsp; }});modalContainer.addEventListener('click', () => {&nbsp; modalContainer.classList.remove('showModal');})body { margin: 0; }img { display: none; }div span {&nbsp; display: inline-block;&nbsp; margin: 5px;&nbsp; font-size: 1.2rem;&nbsp; cursor: pointer;&nbsp; text-decoration: underline;&nbsp; color: blue;}.modal-container {&nbsp; display: none;&nbsp; position: fixed;&nbsp; background: #222;&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; background: rgba(0, 0, 0, 0.8);}.modal-container img { display: inline-block; }.showModal { display: flex; }<div class="modal-container">&nbsp; <div id="modal">&nbsp; &nbsp; <img src="" />&nbsp; </div></div><div id="container">&nbsp; <div>&nbsp; &nbsp; <span>Show Image 1</span>&nbsp; &nbsp; <img src="https://picsum.photos/id/1/200/" />&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <span>Show image 2</span>&nbsp; &nbsp; <img src="https://picsum.photos/id/20/200/" />&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <span>Show image 3</span>&nbsp; &nbsp; <img src="https://picsum.photos/id/30/200/" />&nbsp; </div></div>