我正在处理图像点击一个对象以显示一个弹出框。这是我的代码。
<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;
}
I want this pop-up to slide into the page from top, something like a bootstrap modal.
Also I want this overlay to go, if I click anywhere outside the box.
我怎样才能做到这一点。 谢谢。
最佳答案
看起来您需要使用一些库来归档所需的行为。有一些是针对 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/
关于javascript - 像 React 中的 Bootstrap 模态行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40443160/