1

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 ?

pgman
  • 493
  • 3
  • 12
  • 21
  • What do you mean by overlapping? can you provide a screenshot? – mxdi9i7 Oct 02 '18 at 16:17
  • I mean when the dialog open, the radio buttons on main screen are visble on modal dialog, and i can still access and change the radio buttons tht is on the main page and not the dialog – pgman Oct 04 '18 at 09:03

1 Answers1

0

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

mxdi9i7
  • 677
  • 4
  • 13
  • Thanks for the reply, i tried the shouldCloseOnEsc={true} inside ReactModal tag, as shown below: but doesnt work! – pgman Oct 04 '18 at 09:10
  • @pgman I think you are missing the `onRequestClose={this.closeModal}` also in your props. For `closeModal` method you can call it to hide modal. – mxdi9i7 Oct 04 '18 at 15:33
  • Thanks that works for closing the dialog! It would be really helpful if you could throw some light on setting he zIndex. – pgman Oct 08 '18 at 10:27
  • Did you try directly setting the `className` prop? – mxdi9i7 Oct 08 '18 at 15:55
  • `className="ReactModal__Content"` then go into css and add some z-index to this class – mxdi9i7 Oct 08 '18 at 15:55