反应bootstrap模态没有显示

His*_*ham 4 bootstrap-modal reactjs

我想显示,react-bootstrap-modal但只有叠加显示和模态不显示

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>
.....
Run Code Online (Sandbox Code Playgroud)

截图:

来自浏览器的图片

小智 10

动画使用动画似乎有问题= {false} <Modal animation={false}> </Modal>


小智 5

将近2年,错误仍然发生。接受的答案中提到的错误已关闭,没有任何解决方案。

导致此行为的主要问题是背景幕已正确应用了“淡入淡出”类,但该类也已应用于模态。使模态不可见。

为克服此问题,请强制覆盖由“ fade”类设置的不透明度。

<Modal style={{opacity:1}}> </Modal>
Run Code Online (Sandbox Code Playgroud)


小智 5

添加fade={false}工作至少可以让模式为我显示。


Ale*_*195 0

我想你可能想参考github上的这个问题:

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

该示例似乎尚未准备好复制和粘贴。