Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

gsap Modal missing a click on the outside box

Recommended Posts

I'm struggling to make the modal to close onlclick. 

If I click outside of the modal anywhere, the modal should close.

Any help much apreciated. 

See the Pen ExNPpXQ by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Hey DD77. You've got a couple of warning about elements not existing. You should fix those.


Besides that, this is a logical issue. You should play your animation when the open button is clicked and reverse it when anything outside of the modal or the close button is clicked. 


If you have a specific question about GSAP let us know and we'll do our best to help.

  • Like 1
Link to comment
Share on other sites

I managed to solve an issue and create another one.
Now the position on the button is more than one. hellllllllllpppp 

See the Pen poNEGEL?editors=1112 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Thank you Mikel, as usual you turned a some code into a piss of cake...
On my demo, I have multiple buttons, where I can open the modal. Then once opened a simple closing button, with a click outside the modal that could close it too.
On your demo I think you misinterpreted my initial question. 

Link to comment
Share on other sites

@DD77 Your demo has errors in the console when you click the button. Fix those. There's likely no reason why you would need .getBoundingClientRect, you can just animate the element using the x, y, xPercent, yPercent, scale, and autoAlpha properties. 


Again, most of your issues are logical. Sorry, but we don't have the capacity to build your project for you for free.

  • Like 2
Link to comment
Share on other sites

Thanks for your lecture:-) I removed the getBoundingClientRect and now works.... I hope is now logical what I've done..


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.