reactjs 中的 React Modal
React Modal in reactjs
我已经将 react-modal 用于模态对话框,
在我的 reactjs render() 中,我有以下模态
return(
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example">
<button style={styleClose} onClick={this.handleCloseModal}>
CloseModal</button>
{items}
</ReactModal>
)
但是这个dialog打开的时候,后面的item是重叠的,怎么只有dialog可见,背景元素不可见?
重叠的元素是具有单选按钮的组件。普通文本不重叠。我怎样才能让这些按钮不重叠?
我尝试设置 zIndex 并应用样式,但这不起作用。
另外,当我同时单击键盘上的 esc 键时,如何才能关闭?
你的问题的第一部分需要更多信息来澄清,我可以回答第二部分:
将此添加到您的模态元素中:
shouldCloseOnEsc={true}
如果还没有,记得再添加onRequestClose={<your component method that hides the modal}
查看此 link 了解更多用法:http://reactcommunity.org/react-modal/#usage
我已经将 react-modal 用于模态对话框,
在我的 reactjs render() 中,我有以下模态
return(
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example">
<button style={styleClose} onClick={this.handleCloseModal}>
CloseModal</button>
{items}
</ReactModal>
)
但是这个dialog打开的时候,后面的item是重叠的,怎么只有dialog可见,背景元素不可见?
重叠的元素是具有单选按钮的组件。普通文本不重叠。我怎样才能让这些按钮不重叠?
我尝试设置 zIndex 并应用样式,但这不起作用。
另外,当我同时单击键盘上的 esc 键时,如何才能关闭?
你的问题的第一部分需要更多信息来澄清,我可以回答第二部分:
将此添加到您的模态元素中:
shouldCloseOnEsc={true}
如果还没有,记得再添加onRequestClose={<your component method that hides the modal}
查看此 link 了解更多用法:http://reactcommunity.org/react-modal/#usage