Lazy UIsDocs
    WebsitePricingGet started
    Recipes

    A button that opens a popup

    Two layer names give you a popup that fades in, closes on outside clicks, and blocks the controls behind it.

    Design the popup where it should appear, visible, so you can see it while you work. In the app it starts hidden and fades in, rising slightly, when its button is clicked.

    Try it: click Settings.

    Set it up

    1. 1
      Name the popup

      Rename the popup's frame or group to popup: Settings. Put it at the top of the layer list so nothing covers it.

    2. 2
      Name the button

      Rename the layer that should open it to open: Settings. The name after the colon must match the popup's.

    3. 3
      Optional: a close button

      Inside the popup, name a close icon or a Cancel button close.

    Layers panel
    • Menu
    • popup: Settings
    • Settings
    • close
    • Options
    • open: Settings
    • Sidebar

    How it behaves

    While a popup is open, only the controls inside it respond. Clicking outside it, pressing Esc, or clicking a close layer closes it, and clicking its button again toggles it. For a dark overlay behind the popup, put a full-size rectangle inside the popup group; it fades in with it.