有人可以帮我从这个React模板中创建一个模态缺失吗？

问题描述

所以我克隆了此仓库以用于我的投资组合模板：

https://github.com/rbhatia46/React-Portfolio/

然后，我进行了一些更改，现在看起来像这样：

https://github.com/WarriorofZarona/React-Portfolio-1

问题出在投资组合组件中。在代码中，它在map函数中说了这样的话：

<div className="columns portfolio-item">
                      <div className="item-wrap">
                        <a href="#modal-01">
                          <img src={`${item.imgurl}`} className="item-img" />
                          <div className="overlay">
                            <div className="portfolio-item-meta">
                              <h5>{item.name}</h5>
                              <p>{item.description}</p>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>

问题是应该将锚标记放到名为“ modal-01”的组件上，但是在模板中不存在。进入overlay.css文件，我确实找到了以下内容：

/* popup modal */

.popup-modal {
   max-width: 550px;
   background: #fff;
   position: relative;
   margin: 0 auto;
}

.popup-modal .description-box {
   padding: 12px 36px 18px 36px;
}

.popup-modal .description-box h4 {
   font: 15px/24px 'opensans-bold',sans-serif;
   margin-bottom: 12px;
   color: #111;
}

.popup-modal .description-box p {
   font: 14px/24px 'opensans-regular',sans-serif;
   color: #A1A1A1;
   margin-bottom: 12px;
}

.popup-modal .description-box .categories {
   font: 11px/21px 'opensans-light',sans-serif;
   color: #A1A1A1;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
   text-align: left;
}

.popup-modal .description-box .categories i {
   margin-right: 8px;
}

.popup-modal .link-box {
   padding: 18px 36px;
   background: #111;
   text-align: left;
}

.popup-modal .link-box a {
   color: #fff;
   font: 11px/21px 'opensans-bold',sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   cursor: pointer;
}

.popup-modal a:hover {
   color: #00CCCC;
}

.popup-modal a.popup-modal-dismiss {
   margin-left: 24px;
}

/* fadein/fadeout effect for modal popup
/* ------------------------------------------------------------------ */

/* content at start */

.mfp-fade.mfp-wrap .mfp-content .popup-modal {
   opacity: 0;
   -webkit-transition: all 200ms ease-in-out;
   -moz-transition: all 200ms ease-in-out;
   -o-transition: all 200ms ease-in-out;
   -ms-transition: all 200ms ease-in-out;
   transition: all 200ms ease-in-out;
}

/* content fadein */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
   opacity: 1;
}

/* content fadeout */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
   opacity: 0;
}

看起来好像有代码可以对模式进行样式设置，但是代码本身没有打开任何功能。我尝试使用它时效果不佳。例如，我创建了一个Modal组件，到目前为止，它已经包含了该组件以测试其是否有效：

  <div className="mfp-fade mfp-wrap">
                <div className="mfp-content">
                    <div className="popup-modal" id="modal-01">
                        <div className="description-box">
                            <h4>Testing</h4>
                            <p>This is a test</p>
                            <a href="#" className="popup-modal-dismiss">This is a clickable link</a>
                        </div>
                    </div>
                </div>
            </div>

但是，我发现mfp-wrap这两个类正在干扰投资组合项目的悬停事件，并阻止其运行。

我真的很想尝试这种模式的工作，但是我遇到了很多问题。我知道模式通常不是在React中用这种方式完成的，而是会使用状态，但是我想看看我是否可以使用这里给出的代码来创建所需的模式。谁能帮助您找到解决方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）