Search code examples
reactjsbootstrap-modal

react bootstrap modal not showing


i want to show react-bootstrap-modal but only the overlay appear and modal not showing

import Modal from 'react-bootstrap-modal';
......
 <Modal
                    show={this.state.open}
                    onHide={this.closeModal}
                    aria-labelledby="ModalHeader"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Some Content here</p>
                    </Modal.Body>
                    <Modal.Footer>
                        // If you don't have anything fancy to do you can use
                        // the convenient `Dismiss` component, it will
                        // trigger `onHide` when clicked
                        <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>

                        // Or you can create your own dismiss buttons
                        <button className='btn btn-primary'>
                            Save
                        </button>
                    </Modal.Footer>
                </Modal>
.....

screenshot:

image from browser


Solution

  • I think you may want to refer to this issue on github:

    https://github.com/jquense/react-bootstrap-modal/issues/35

    The example doesn't seem to be copy and paste ready.