Button-specific HTML in Bricks Popup

In the Bricks Facebook group a user asks:

I need to create popups to expend the text (eg. read more). I wonder if I have to create separate Template for each popup or if there is a way to create 1 template and show different texts based on triggers.

There is currently no built-in option to pass text from the clicked button to the opened popup.

We can write JavaScript to grab the value of a custom data-popup-text attribute of our buttons and if not empty, set it as the HTML content of a text element inside the Popup.

This way, a single/the same Popup can be made dynamic for showing different content depending on which button is clicked.

This Pro tutorial shows how.

Step 1

Create a template of the type "Popup" and edit it with Bricks.

Settings (gear icon) → TEMPLATE SETTINGS → CONDITIONS: Add "Entire website" condition.

Add a Section and inside its Container, a Basic Text element.

Change the text to your desired default text/HTML that should appear when the popup is opened by clicking buttons that don't have our data attribute set.

Step 2

Create a Page and edit it with Bricks.

Add a button.

Add an interaction that will make your Popup show when this button is clicked.

Add a data-popup-html attribute and set its value to your desired HTML that should be shown inside the popup when this button is clicked.

Assign a class of say, popup-button. If you want to assign any styles to this class, you could add it in the element classes input box. Otherwise, at STYLE → CSS → CSS classes.

Duplicate this button and change the data attribute's value.

Duplicate the above button but this time, delete the data attribute.

Step 3

Page settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts.

Paste: