Opens in a new tab
Add your offcanvas content in here

Open PopUp from a Button

Yes. In Bricks Builder, the cleanest way is to use Bricks’ native Popup interaction on the button—no code needed. Button → Open Popup First, make sure your popup exists: Then edit the Button that should open it: That’s it. Clicking…

Yes. In Bricks Builder, the cleanest way is to use Bricks’ native Popup interaction on the button—no code needed.

Button → Open Popup

First, make sure your popup exists:

  1. Go to Bricks → Templates → Add New.
  2. Set Template Type → Popup.
  3. Design the popup and Save it.

Then edit the Button that should open it:

  1. Select your Button.
  2. Go to Interactions in the element settings.
  3. Click Add interaction.
  4. Set:
    • Trigger: Click
    • Action: Show popup
    • Template: select your popup
  5. Save/update the page.

That’s it. Clicking the button should now open the popup.

Closing the popup

Inside the popup, add an Icon or Button (for example ×), select it, then add another interaction:

Click → Hide popup

You can also configure the popup itself to close when the visitor clicks the backdrop or presses Esc.

Since you’re already using Bricks 2.x on your site, I’d use Interactions rather than older CSS-class/JavaScript methods.

You’re right — my wording was wrong. In current Bricks, “Show popup” is not an Action. Bricks’ own documentation confirms the setup. Bricks Academy

On your Button → Interactions → Add interaction, set:

  • Trigger: Click
  • Action: Show element
  • Target: Popup
  • Popup: select the popup template you created

So the important bit is:

Click → Show element → Target: Popup → [your popup]

Once you choose Target = Popup, Bricks should give you another field where you select the actual popup template. Bricks Academy

Also make sure the popup has a Template Condition that includes the page you’re testing (for example Entire website). Otherwise Bricks doesn’t render the popup on that page, so the button cannot open it. Bricks Academy

And yes — “Show popup” does exist in Bricks, but as a popup-specific trigger, which is what caused the confusion. It isn’t the action you use on your button. Bricks Academy

You’re right — my wording was wrong. In current Bricks, “Show popup” is not an Action. Bricks’ own documentation confirms the setup. Bricks Academy

On your Button → Interactions → Add interaction, set:

  • Trigger: Click
  • Action: Show element
  • Target: Popup
  • Popup: select the popup template you created

So the important bit is:

Click → Show element → Target: Popup → [your popup]

Once you choose Target = Popup, Bricks should give you another field where you select the actual popup template. Bricks Academy

Also make sure the popup has a Template Condition that includes the page you’re testing (for example Entire website). Otherwise Bricks doesn’t render the popup on that page, so the button cannot open it. Bricks Academy

And yes — “Show popup” does exist in Bricks, but as a popup-specific trigger, which is what caused the confusion. It isn’t the action you use on your button. Bricks Academy