0

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.

Improve this question
1
  • Have you looked at React-Bootstrap's implementation? Commented Nov 5, 2016 at 21:10

1 Answer 1

Reset to default
0

Looks like you need to use some library to archive desired behavior. There is some for React, can be found by "modal", "overlay" keywords. A lot of alternatives exist. Take a look at https://github.com/fckt/react-layer-stack (check alternatives also https://github.com/fckt/react-layer-stack#alternatives). It solves your case perfectly. Demo and examples - https://fckt.github.io/react-layer-stack/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments