How to close Modal the React way?
12,708
class App extends React.Component {
constructor(){
super()
this.state = {
show: false
}
}
openModal() {
this.setState( prevState => (
{show: !prevState.show}))
}
closeModal(e) {
if(e.target.id === "modal") {
this.setState({show: false})
}
}
render() {
return (
<div>
<button id='button' onClick={() => this.openModal()}>the modal button</button>
{this.state.show && <div id='modal' onClick={(e) => this.closeModal(e)}>
<div className="modal-box">
<h1> I'm the AWESOME modal! </h1>
</div>
</div>}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Here's a demo - https://codepen.io/anon/pen/dzmpqv
Related videos on Youtube
Author by
Hyrule
Updated on May 30, 2022Comments
-
Hyrule almost 2 years
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 themodal-box
the modal closes down. How to make the modal box close when pressed outsidemodal-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>
-
Nocebo over 6 yearsIn theory, you only need one handler:
toggleModal() { this.setState( prevState => ( {show: !prevState.show})) }
. You could also make use of this lib: react-toolbox.com/#/components/dialog. They have great and easy to use components
-
-
webdeb over 6 years@Hyrule dont forget to implemet keyEvent handlers like for the ESC key