I’m trying to set up multiple pop-ups to display extra information about products features. I am doing this by using click-triggered interactions. The pop-ups are supposed to have a fixed position and to occupy the entire viewport. This displays correctly when i preview the interaction from the interactions menu. Unfortunately it doesn’t once I try it in the published site. Would someone be able to help me with this?
The interaction is “calltoview” and it is triggered when one clicks on a “vermas” element and applied to sibling elements called “funcion-bg”.
Hey @jgonzalezmilburn my recommendation would be to rebuild your modal to be display: block, and then add in another div that holds the modal that’s 100% width/height and has the flex settings. Then in your interaction, set that parent modal to display: block instead of flex.
Please let me know if this is helpful, if not, I’m happy to help further.
Hi Waldo, could you take a look at my post below? Also, I tried following the instructions on the “custom lightbox” tutorial and I have the same problems. Thank you!
Hi @jgonzalezmilburn, I have been looking at this further, and for some reason as you mentioned, the fixed div only works when the transformation is turned off on those elements in the design.
I have been doing some checking on this, and there seems to be some history on this related to stacking contexts getting changed after a transformation, see this article here: CSS performance relative to translateZ(0) - Stack Overflow
I am not 100% positive this is the issue, I am still doing some testing with this. Just wanted to give you an update.
