Question

让我解释一下情况。目前我正在做一个练习SCSS和React的项目。这是一个致力于足球队的网站。问题是我正在使用CSS和HTML创建自定义模态窗口。我想要的是每当我点击“看图片”按钮时，应该打开与此卡相关的模态窗口，而在我的情况下，所有模态窗口都会立即打开。

所有模态窗口一次打开，一个堆叠在一起。就像那样。

整体上有四个模态窗口，但只有顶级模态显示。这些模态窗口的HTML结构如下：

他们有相同的类和ID。

在React部分中，我有一个名为PopUp的组件，它从db.json获取信息作为props。

import React from 'react';
import Button from './button-round-dark';

const generateAdditionalInfo = ({info}) => {
    if (info) {
        return info.map((item) => {
            const addInfo = item.additionalInfo;
            console.log(addInfo);
            return (
            <div className="popup" id="popup">
                <div className="popup__content" key={addInfo.id}>
                    <div className="popup__left">
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[0]}`}/>
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[1]}`}/>
                    </div>

                    <div className="popup__right">
                        <a href="#legend-team-section" className="popup__close">x</a>
                        <h2 className="heading-secondary u-margin-bottom-small">{addInfo.title}</h2>
                        <p className="popup__description">{addInfo.description}</p>
                    </div>
                </div>    
            </div>
            )
        })
    }
}


const PopUp = (props) => {
    return (
        <div>
            {generateAdditionalInfo(props)}
        </div>

    )
}

export default PopUp;

db.json

"legendaryTeam":[
      {
        "id":"p1",
        "name": "buffon",
        "image":"buffon.jpg",
        "years":"2001-2018",
        "number":"18",
        "position":"goalkeeper",
        "physicalFeatures":{
          "weight":"86",
          "height":"194",
          "speed":"7",
          "power":"250"
        },
        "additionalInfo":{
          "id":"1",
          "images":["buffon_1.jpg","buffon_2.jpg"],
          "title":"Buffon title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."
        }
      },
      {
        "id":"p2",
        "name": "Ravanelli",
        "image":"ravanelli.jpg",
        "years":"1992-1996",
        "number":"10",
        "position":"forward",
        "physicalFeatures":{
          "weight":"75",
          "height":"176",
          "speed":"9",
          "power":"300"
        },
        "additionalInfo":{
          "id":"2",
          "images":["ravanelli_1.jpg","ravanelli_2.jpg"],
          "title":"Ravanelli title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."          
        }
      }

请注意 additionalInfo 对象，这是信息发送到 PopUp 组件的位置。

模态窗口的

自定义CSS代码如下所示。

.popup {
    height: 100vh;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background-color: rgba($color-black,0.8);
    z-index:99999; 
    opacity: 0;
    visibility: hidden;
    transition:all .3s; 
    &:target {
        opacity: 1;
        visibility: visible;
    }
        &__content {
            @include centrify;
            width:75%;
            background-color: $color-white;
            box-shadow: 0 2rem 4rem rgba($color-black, .2);
            border-radius: 3px;
            display: table;
            overflow: hidden;
        }

        &__left {
            width:33.33333333%;
            display: table-cell;
        }

        &__right {
            width:66.666666666%;
            display: table-cell;
            vertical-align: middle;
            padding: 3rem 5rem;
        }

        &__img {
            display: block;
            width:100%;
        }

        &__description {
            font-size: 1.4rem;
            margin-bottom: 4rem;
        }
}

在目标选择器的帮助下打开模态窗口。现在我正在研究如何实现我想要的工具。请帮帮我。你有什么想法？顺便说一句其他模态窗口看起来像这样。但是它们的堆叠较低，所以它们没有显示出来。

如果您想修补我的项目，请点击here

运行反应见下图

要运行db.json，您需要全局安装

$ npm install -g json-server

然后运行它，见下图

要运行SCSS，请参阅下面的图片

Answer 1

您的问题不在您的描述中，您将ButtonRoundDark绑定到所有模式。您需要将onClick个活动添加到您的“pics＆＃39;按钮。点击后，获取数据，显示模态。

React，CSS：如何为每张卡片打开相应的模态窗口

1 个答案: