Question

我处理图像点击一个对象以显示一个弹出框。这是我的代码。

<a href="#" onClick={this.handleClick} data-id={image.id}>

这是我的handleClick方法。

 handleClick(event) {
        event.preventDefault();
        let mediaId = event.currentTarget.attributes['data-id'].value;
        this.setState({overlay: <Overlay mediaId={mediaId}/>});
      }

这是相关的CSS

.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 500px;
  background-image: linear-gradient(to top right, #7282fb, #755bf9, #7934f7);
  box-shadow: 10px 10px 20px gray;

}

我希望这个弹出窗口从顶部滑入页面，类似于   bootstrap modal。

如果我点击框外的任何地方，我也想要这个叠加层。

我怎样才能做到这一点。感谢。

Answer 1

看起来您需要使用某些库来存档所需的行为。 React有一些，可以通过＆＃34; modal＆＃34;，＆＃34; overlay＆＃34;关键字。存在许多替代方案。看看https://github.com/fckt/react-layer-stack（另请查看备选方案https://github.com/fckt/react-layer-stack#alternatives）。它完美地解决了你的情况。演示和示例 - https://fckt.github.io/react-layer-stack/

在React中的Bootstrap模态行为

1 个答案: