title: How to make the background of a react Modal solid
body: <p>So I have just added a Modal from react-Modal to a page through a button click, the problem I am facing is when i click that button to make the modal pop up, it does but the content of the page the modal covers seeps through, so the Modal looks like this.
  <a href="https://i.stack.imgur.com/4kep8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4kep8.png" alt="enter image description here" /></a></p>
  <p>The table etc shouldn't be there, only a blank white screen.
  Can anyone help me please?</p>
  <p>Below is the first class where I click to show the modal.</p>
  <pre><code>const [showModal, setShowModal] = useState(false)
  &lt;button onClick={() =&gt; { setShowModal(true) }} className=&quot;paddingNextButton float-right viewButtonHover btn btn-md btn-outline-secondary&quot;&gt; Next&lt;/button&gt;
  &lt;ModalForm isModalOpen={showModal} closeModal={() =&gt; { setShowModal(false) }} /&gt;
  
  </code></pre>
  <p>Below is another class of the Modal itself.</p>
  <pre><code>import React from 'react'
  import Modal from 'react-modal'
  import { Overlay } from 'react-bootstrap'
  
  Modal.setAppElement('#root')
  function ModalForm({ isModalOpen, closeModal }) {
      return (
          &lt;div&gt;
              &lt;Modal isOpen={isModalOpen} onRequestClose={closeModal}
                  style={
                      {
                          overlay: {
                              backgroundColor: &quot;grey&quot;
                          },
                          content: {
                              color: &quot;red&quot;
                          }
  
                      }
                  }
              &gt;
                  &lt;h1&gt;Title&lt;/h1&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      )
  }
  
  export default ModalForm
  </code></pre>