Skip to main content
Don2
August 2, 2023
Question

Clicking button within overlay, goal is to open new overlay and close old one

  • August 2, 2023
  • 7 replies
  • 4255 views

I have a manually placed overlay with a button. Upon click of that button, I want to open a centered overlay and close the original overlay. I can’t figure out how to do this. Currently I’m able to open a new overlay from that button, but the old overlay stays open beneath it.

    This topic has been closed for replies.

    7 replies

    Edwart
    Edwart
    August 3, 2023

    Hi @Don2,

    1. The first button opens an overlay on click (manual placed).
    2. In the overlay you have a button to open another overlay. The actions to assign are, first “close overlay” and second “open overlay 2” (centered).

    Open the first overlay (manual placed)

    Screenshot 2023-08-03 at 08.33.58

    Close the overlay and then open the new overlay

    Screenshot 2023-08-03 at 08.34.08

    Close the overlay to start over

    Screenshot 2023-08-03 at 08.34.17

      Don2Author
      August 3, 2023

      Wow, thank you for this Edwart. I didn’t realize that you can add two actions to the same "On click). This is a huge help!

      Jason_Gaylor
      Jason_Gaylor
      March 8, 2024

      Yes!!! Thank you! Didn’t realize this either.

      Shashi_Prakash1
      Shashi_Prakash1
      July 8, 2024

      The two action feature is available in paid plans only 😶‍🌫️

      Daniel_Cullinan
      Daniel_Cullinan
      Active Member
      July 18, 2024

      Just use ‘swap overlay’ as the action on the first overlay’s button: https://help.figma.com/hc/en-us/articles/360039818254-Create-overlays-in-your-prototypes#h_c996af75-4270-4f95-844b-643d9dd1d10f

      Peter_Uithoven
      Peter_Uithoven
      July 22, 2024

      (With the swap overlay you can’t change the location. So for example going from a tooltip to a sidepanel isn’t possible with swap overlay.)

      Maja_Slanc
      Maja_Slanc
      November 14, 2024

      This is very helpful! Thank you!

      Terms & ConditionsAccessibility statement