1

我已将 react-modal 用于模态对话框，

在我的 reactjs render() 中，我有以下模式

return(
        <ReactModal
        isOpen={this.state.showModal}
        contentLabel="Minimal Modal Example">
        <button style={styleClose} onClick={this.handleCloseModal}>
      CloseModal</button>
        {items}
     </ReactModal>
    )

但是当这个对话框打开时，后面的项目是重叠的，我怎么能只有对话框是可见的而不是背景元素？

重叠的元素是具有单选按钮的组件。普通文本不重叠。我怎样才能让这些按钮不重叠？

我尝试设置 zIndex 并应用样式，但这不起作用。

另外，当我还单击键盘上的 esc 时，如何关闭？

4

1 回答 1

0

您问题的第一部分需要更多信息来澄清，我可以回答第二部分：

将此添加到您的模态元素： shouldCloseOnEsc={true}

如果还没有，记得添加onRequestClose={<your component method that hides the modal}

查看此链接了解更多用法：http ://reactcommunity.org/react-modal/#usage

于 2018-10-02T16:21:06.420 回答