React Modal в reactjs
Я использовал модальный диалог для модального диалога,
и в моем responsejs render () у меня есть следующий модальный
return(
<ReactModal
isOpen = {this.state.showModal}
contentLabel = "Minimal Modal Example">
<button style = {styleClose} onClick = {this.handleCloseModal}>
CloseModal</button>
{items}
</ReactModal>
)
Но когда это диалоговое окно открывается, элементы позади него перекрываются, как я могу сделать так, чтобы был виден только диалог, а не элементы фона?
Перекрывающиеся элементы - это компоненты с радиокнопками. Обычный текст не перекрывается. Как сделать так, чтобы эти кнопки не перекрывали друг друга?
Я попытался установить zIndex и применить стиль, но это не сработало.
Также как я могу закрыть, когда я также нажимаю клавишу Esc на клавиатуре?
Я имею в виду, что когда диалоговое окно открыто, переключатели на главном экране видны в модальном диалоговом окне, и я все еще могу получить доступ и изменить переключатели, которые находятся на главной странице, а не в диалоговом окне
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Первая часть вашего вопроса требует дополнительной информации для пояснения, я могу ответить на вторую часть:
Добавьте это в свой модальный элемент:
shouldCloseOnEsc = {true}
Если вы этого не сделали, не забудьте также добавить onRequestClose = {<your component method that hides the modal}
Проверьте эту ссылку, чтобы узнать больше об использовании: http://reactcommunity.org/react-modal/#usage
Спасибо за ответ, я попробовал использовать shouldCloseOnEsc = {true} внутри тега ReactModal, как показано ниже: <ReactModal isOpen = {this.state.showModal} shouldCloseOnEsc = {true} shouldCloseOnOverlayClick = {true}> </ReactModal>, но не работает !
@pgman Я думаю, вам не хватает onRequestClose = {this.closeModal} в вашем реквизите. Для метода closeModal вы можете вызвать его, чтобы скрыть модальное окно.
Спасибо, что закрыли диалог! Было бы очень полезно, если бы вы могли пролить свет на установку zIndex.
Вы пробовали напрямую настроить опору className?
className = "ReactModal__Content" затем перейдите в css и добавьте некоторый z-index к этому классу
Что вы имеете в виду под перекрытием? можешь предоставить скриншот?