Search code examples
javascriptreactjsreact-modal

React Modal in reactjs

I have used react-modal for modal dialog,

and in my reactjs render(), i have the following modal 

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

But when this dialog open, the items behind are overlapping, how can I have only dialog being visible and not the background elements?

The elements that are overlapping are the components that have radiobuttons. Normal text are not overlapping. How can i make these buttons not to overlap?

I tried setting the zIndex and apply styling but that doesnt work.

Also how can i have close when i also click esc on keyboard ?

Solution

  • The first part of your question needs more info for clarification, I can answer the second part:

    Add this to your modal element: shouldCloseOnEsc={true}

    If you haven't, remember to also add onRequestClose={<your component method that hides the modal}

    Check this link for more usage: http://reactcommunity.org/react-modal/#usage