CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjsreact-bootstrap
patrickhuang94
patrickhuang94

Reputation: 2115

Exit modal by clicking on background content in React

I'm using react-bootstrap (documentation: https://react-bootstrap.github.io/components.html#modals-props) and am not sure how I can go about closing a modal by clicking on the background.

Currently, I'm closing it through (don't mind the function onCloseModal- it pretty much closes the modal):

<Modal closeButton={true} onHide={this.onCloseModal.bind(this)}>
    <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
    </Modal.Header>
</Modal>

There's no documentation on how to close by clicking on the background. I'm sorry I haven't really tried anything, but I've looked everywhere on Stackoverflow and all solutions correspond to jQuery, not React.

Upvotes: 0

Views: 1039

Answers (1)

trungvose
trungvose

Reputation: 20034

It does has in the documentation in props section named backdrop

If you familiar with Bootstrap, you might know the attribute to describe show/hide the modal while clicking into the background action is called static backdrop.

So to close a modal by clicking on the background. Try the below code.

<Modal {...this.props} backdrop="true">
    <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Wrapped Text</h4>          
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
    </Modal.Footer>
</Modal>

Note that ...this.props is JSX Spread Attributes

Upvotes: 0

Related Questions