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:
