26
rated 0 times
[
33]
[
7]
/ answers: 1 / hits: 20332
/ 7 Years ago, sun, august 20, 2017, 12:00:00
I have this modal button and when I press it a modal shows up.
I want it to be closed if click - outside - the modal-box, but now it regardless if i click outside or inside the modal-box the modal closes down. How to make the modal box close when pressed outside modal-box the react way?
https://codepen.io/anon/pen/MvVjOR
class App extends React.Component {
constructor(){
super()
this.state = {
show: false
}
}
openModal() {
this.setState( prevState => (
{show: !prevState.show}))
}
closeModal() {
this.setState({show: false})
}
render() {
return (
<div>
<button id='button' onClick={() => this.openModal()}>the modal button</button>
{this.state.show && <div id='modal' onClick={() => this.closeModal()}>
<div className=modal-box>
<h1> I'm the AWESOME modal! </h1>
</div>
</div>}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))#modal {
display: block;
position: fixed;
padding-top: 50px;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0 ,0 ,0 , 0.5);
}
.modal-box {
z-index: 50;
margin: auto;
width: 80%;
height: 200px;
background-color: white;
}<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>
<div id=root></div>
More From » reactjs
