ReactJS：如何创建透明页面？

Question

我目前有一个页面和一个按钮。单击按钮后，我想更新状态属性，一旦更新，组件将重新渲染并在原始页面上显示透明页面。

想要这样的透明页面：

到目前为止，我想到了类似的东西：

render() {
if(this.state.buttonPressed) {
  return(
    <div style={styles.transparentPage}>
       //transparentPage content
    </div>
  )
} else {
  return(
    <div style={styles.originalPage}>
       //originalPage content
    </div>
  )
}

但这会完全删除 originalPage 并使用 transparentPage 重新呈现。那么在原始页面上实现透明页面的正确/正确方法是什么？

Answer 1

你需要做的就是拥有类似

的东西

render() {
  var overlay = this.state.buttonPressed ? <div className="overlay" /> : null;

  return(
    <div style={styles.originalPage}>
      {overlay}
    </div>
  )
}

然后在你的css中做：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(250,250,250,.5);
  z-index: 25;

}

只要确保模态框的 z-index 大于覆盖 z-index，这样它就不会使其透明