Question

我有一个卡片和一个 Modal 组件

Select 
   * 
from Table1 
where ID1 in ('" & variable1 & "', '" & variable2 & "' ) ;

因此，我不需要渲染我的 Modal 。逻辑。

在这种情况下， Modal 的工作是显示 Card 组件（ Card 具有固定的高度，因此我无法在其中显示所有信息。

现在，在更高层次上，我有以下内容：

class Card extends Component {
  constructor() {
    super();
    this.state = { showModal: false }
  }

  render() {
    const { showModal } = this.state;
    return (
      {/* Some code */}
      {showModal && <Modal />}
    )
  }
}

问题是我的 Card 组件的样式为class App extends Component { /* Some Code */ render() { return ( <div> <Content /> {/* Our content */} <Overlay /> {/* Our all-purpose-overlay (we need it for the Modal) */} </div> ) } }，而 Modal 组件的样式为position: relative和样式{{1 }}。

我做了一些研究，我读到了带有非静态的嵌套元素位置与z-index的作用方式不同。 z-index仅在非静态元素内生效。

因此，我无法将我的 Modal 出现在 Overlay 组件上方。此外，Card组件具有z-index属性。因此，模式被裁剪。

这是一个简单的演示。

position: absolute

overflow:hidden

function toggleModal() {
  var app = document.getElementById("app");
  app.classList.toggle("-modal");
}

问题：我应该如何组织我的组件，以免出现此问题？

我认为顶层只有一个 Modal 。然后我简单地显示它。但是我需要将 Card 的:root { background: #ddd; } #app, #overlay { height:100vh; width:100%; } #app { display: flex; align-items: center; justify-content: center; } /* Overlay */ #overlay { position: absolute; top: 0; left: 0; z-index: 1; visibility: hidden; background: rgba(0,0,0,0.3); } .-modal #overlay { visibility: visible !important; } /* Card */ #card { position: relative; width: 250px; padding: 1em; border-radius: 5px; background: white; overflow: hidden; /* Problem */ } .content { padding: 4em 0; text-align: center; } .btn { padding: 1em 2em; border:none; color:white; float: right; cursor: pointer; transition: 0.2s ease; background: #00abff; } .btn:hover { background: #0c9de4; } /* Modal */ #modal { width: 300px; position: absolute; top:0; left: 50px; /* Modal Gets clipped */ visibility: hidden; background-color:red; } .-modal #modal { visibility: visible; }渲染为 Modal 。

我应该如何进行？

Answer 1

由于您使用的是React，因此我实际上建议您使用Portal来渲染您的模态。 Portal在React中解决的一件事就是这个问题。如果您使用的是React（16+）的最新版本，请you already have access to portals。

如果您使用的是旧版本的React，可以。 You can use an implementation like this (react-portal) instead。

现在，您将在包含<div>的包含position: relative的上下文之外的完全独立的React树中呈现组件/标记，并且可以根据需要将其绝对或固定定位

React / Redux / CSS-模式放置

1 个答案: