React 中的 Bootstrap 模态行为答案

【问题标题】：Bootstrap modal like behavior in ReactReact 中的 Bootstrap 模态行为
【发布时间】：2016-11-07 14:41:37
【问题描述】：

我正在处理图像单击对象以显示弹出框。这是我的代码。

<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;

}

我希望此弹出窗口从顶部滑入页面，类似于引导模式。

如果我单击框外的任何位置，我也希望此叠加层消失。

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

【问题讨论】：

你看过React-Bootstrap的实现吗？

标签： javascript css reactjs

【解决方案1】：

看起来您需要使用一些库来归档所需的行为。有一些是针对 React 的，可以通过“modal”、“overlay”关键字找到。存在很多替代方案。看看https://github.com/fckt/react-layer-stack（也可以查看https://github.com/fckt/react-layer-stack#alternatives）。它完美地解决了您的问题。演示和示例 - https://fckt.github.io/react-layer-stack/

【讨论】：