Question

我想显示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>
.....

截图：

image from browser

Answer 1

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

Answer 2

我的解决方法是

    class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };
        this.toggle = this.toggle.bind(this);
    };

    toggle() {
        this.setState({modal: !this.state.modal});
    }

    render() {
        return (
            <div>
                <button onClick={ this.toggle}>Contact Us</button>
                <Modal isOpen={this.state.modal} fade={false}
                       toggle={this.toggle} style={{width: "200px", display: "block"}}>
                    <ModalHeader toggle={this.toggle}>
                        Modal title
                    </ModalHeader>
                    <ModalBody>
                        Lorem ipsum dolor sit amet,
                    </ModalBody>
                    <ModalFooter>
                        <Button onClick={this.toggle}>
                            Do Something
                        </Button>{' '}
                        <Button onClick={this.toggle}>Cancel</Button>
                    </ModalFooter>
                </Modal>
            </div>
        );
    }
}

Answer 3

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

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

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

<Modal style={{opacity:1}}> </Modal>

Answer 4

我想你可能想在github上引用这个问题：

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

示例似乎没有复制和粘贴准备好。

Answer 5

添加fade={false}至少可以使我看到要显示的模式。

Answer 6

问题不是因为“react-bootstrap”包。问题是：您必须导入了 bootstrap css 并且 react-bootstrap 包中的 bootstrap css 发生冲突。

尝试按如下方式导入 css：

import "bootstrap/dist/css/bootstrap.min.css";

代替：

import "./assets/CSS/bootstrap/dist/css/bootstrap.min.css";

因为我们无法删除使用模态的“react-bootstrap”。所以尝试删除其他css。这为我解决了这个问题。

反应bootstrap模态没有显示

6 个答案: