I have a brand new experiment to share with you here in the Custom Interactions lab. This new example demonstrate the flexibility we have with Custom Interactions when building with Blocs 6.1 and using the new data() short code.
In this example, I populate a single modal with different data based on the trigger element. This type of interaction could be useful for product popovers, but could easily be expanded to create your very own custom light box solution (if you felt adventurous).
How it works 
The setup for this type of interaction is very simple. Trust me 
- I have a single modal with a title, image and description text, which all have unique IDs assigned (including the actual modal).
- I then have a single Custom Interaction which will pull data from the trigger element using the data() short code to populate the title, description and set the image src path (including data-src for lazy load).
After I have set all of the data for each part of the modal (title, description and image) I also toggle the actual modals visibility (this shows the modal).
- Finally I set up the trigger element. I assign my custom interaction on the click event and I assign the custom data attributes required to populate the modal.
Pay close attention to the data attributes on the button such as data-title and how I use those in the actual interaction rules using the short code data(data-title).
Now if I duplicate the button multiple times and change the custom attributes data-title, data-desc and data-img-path on the duplicated button. I can get the same modal to show completely different information.
Pretty handy eh!
And of course here is the sample project file for you to play around with 
This project requires Blocs for Mac 6.1 beta build 2 minimum
Magic Modal.bloc (367.3 KB)
Have fun 
