模态显示在项目下方

编程问答 2022-05-02

问题描述

我遇到了一个奇怪的问题，这让我停了几个小时。我创建了一个 MERN 应用程序，其中有一个页面可以介绍团队成员。我还有一个通过点击成员触发的每个成员的模式。问题是当我创建一个新成员时，与以前成员相关的模态显示在后面添加的成员后面。我将附上图片以更清楚地展示发生了什么。 enter image description here

enter image description here

这是我定义模态的方式：

const Modal = ({ closeModal,children }) => {
  const closeIcon = () => (
    <FontAwesome
      name='times'
      onClick={closeModal}
      className='modal-font-awesome'
    />
  )
  return (
    <div id='overlay'>
      <div className='content'>
        {closeIcon()}
        {children}
      </div>
    </div>
  )
}

这是我用于设置模态样式的 scss 代码：

#overlay {
  position: fixed;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0.5);
}

.content {
  margin: 120px auto;
  background-color: white;
  border-radius: 0.25rem;
  width: 70vw;
  padding: 2rem;
  position: relative;
  border-left: 5px solid rgb(37,153,124);
}

您对正在发生的事情有什么建议吗？ 提前致谢。

解决方法

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

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

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

reactjsreactjsreactjsreactjssasssasssimplemodalsimplemodalz-index