Модальное окно React-Boostrap не отображается
У меня возникли проблемы с модальным вариантом реакции-начальной загрузки, которые не отображаются так, как мне бы хотелось.
Это код модального окна. И функции showModal и hideModal являются причиной, устанавливая логическое значение showModal в значение true и false соответственно.
У меня import { Button, Modal } from 'react-bootstrap вверху файла.
Может кто-нибудь мне помочь?
TIA
<Modal show = {this.state.showModal} onHide = {(e)=> this.hideModal(e)}>
<Modal.Header closeButton>
<Modal.Title>Translations</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Filter:</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr />
</Modal.Body>
<Modal.Footer>
<Button onClick = {(e)=> this.hideModal(e)}>Close</Button>
</Modal.Footer>
</Modal>
<Button className = "btn btn-primary m-1" onClick = {(e)=> { this.showModal(e) }}>
See modal
</Button>
Еще не знаком с модальными окнами, но помогает ли это с помощью this.setState ({showModal: true}); на вашем onClick?
Хм. Возможно, я начал с Bootstrap 4. Но я только что запустил npm install [email protected], и все равно ничего не работает.
@OliverJuhl не могли бы вы проверить z-индекс вашего модального окна?
Ответы 1
show prop принимает логическое значение. Когда true Модальное окно покажет себя. Итак, внутри вашего обработчика вам нужно установить состояние true/false.
Вы можете проверить здесь рабочую демонстрацию stackblitz.
Фрагмент кода
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button, Modal } from 'react-bootstrap';
//Presentational Components MyModel
const MyModel = (props) => (<Modal show = {props.isHidden} onHide = {props.onClose}>
<Modal.Header closeButton>
<Modal.Title>Translations</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Filter:</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr />
</Modal.Body>
<Modal.Footer>
<Button onClick = {props.onClose}>Close</Button>
</Modal.Footer>
</Modal>);
class App extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
}
}
showModal = (e) => {
this.setState({ showModal: true })
}
hideModal = (e) => {
this.setState({ showModal: false })
}
render() {
return (
<div>
<MyModel isHidden = {this.state.showModal} onClose = {this.hideModal} />
<Button className = "btn btn-primary m-1" onClick = {this.showModal}>Show modal</Button>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Я сделал именно это. А у меня не работает. Для меня это просто прозрачный div.
не могли бы вы создать демо stackblitz, чтобы я мог попытаться проверить проблему.
Где функции showModal, hideModal? react-bootstrap еще не поддерживает Bootstrap 4.