Closing a Modal by Clicking Outside It

Hello,
I am about to finish a project.
Unfortunately, when I close my modal by clicking outside of it, the interaction is presented everywhere. For example, when I click inside the modal, the modal will also close.

What can I do to fix this?

https://preview.webflow.com/preview/modal-window-8c6a23?utm_source=modal-window-8c6a23&preview=96135b4dcf0aa6acd6e4b8c6b05697cd


Here is my public share link: LINK
(how to access public share link)

Option 1:
Just removed the interaction from CodePenWrapper. Delete that one and keep the “close X”

Option 2:
Delete both interactions on CodePenWrapper & Close X. Add the close interaction on the parent “Code Pen Window”. That works better I think.

What if my teacher wants both a close button (“X”) and it to close by clicking outside of it?

  • close bird modal by clicking outside bird modal
  • close codepen modal by clicking outside codepen modal
  • close bird modal by clicking closer bird div
  • close codepen modal by clicking closer codepen div

this is my goal :slight_smile: