I'm handling the image click on an object to display a pop-up box. This is my code.
<a href="#" onClick={this.handleClick} data-id={image.id}>
This is my handleClick method.
handleClick(event) {
event.preventDefault();
let mediaId = event.currentTarget.attributes['data-id'].value;
this.setState({overlay: <Overlay mediaId={mediaId}/>});
}
This is the relevant 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.
How can I achieve this. Thanks.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4