1

I have a bootstrap modal that has a form. I need to be able to click outside the modal so that the modal closes when the form is submitted. how can i achieve this in react, thanks

EDIT:

bootstrap_modal
   form_inside_bootstrap_modal
      submit_button_inside_form
   </ form_inside_bootstrap_modal>
</ bootstrap_modal>

I want to be able to close the bootstrap modal when submit_button_inside_form is clicked

SOLUTION:

document.elementFromPoint(x,y).click()
kritiz
  • 1,112
  • 12
  • 15

2 Answers2

1

You can set eventListener on click in componentDidMount.

like this:

  useEffect(() => {
    window.addEventListener("click", function(e) {
      if (document.getElementById("modalWindow").contains(e.target)) {
        alert("clicked inside");
      } else {
        alert("clicked outside");
      }
    });
    return () => window.removeEventListener("click");
  }, []);

see the example i wrote here.

cybercoder
  • 3,545
  • 2
  • 18
  • 30
  • 1
    thank you, but my i have to simulate a click event in the window,(somewhere outside the modal) when a button inside the modal is clicked – kritiz Jun 22 '20 at 06:28
  • 1
    @kritiz and the example didn't do that? hmmm. It seems it is doing that. – cybercoder Jun 22 '20 at 06:29
  • 1
    the example shows me where I clicked , (outside or inside) but I need to make a click event outside the modal when I click a button inside the modal – kritiz Jun 22 '20 at 06:37
  • 1
    Do you mean you need to run a function which in upper level, when click on the button? – cybercoder Jun 22 '20 at 06:48
0

It's simulating a click at a position: x,y coordinates with javascript which can be achieved using this

document.elementFromPoint(x, y).click();
kritiz
  • 1,112
  • 12
  • 15