On this page Our People - New layout, when clicking on one of the profile images a modal popup is activated, it should fill the screen. In the Webflow Designer the modal fills the screen but in Preview and on the published dev site (link above) the modal opens relative to the div it is inside.
The list is a collection output and the modal element has position Fixed and Full attributes. The collection item ‘wrap-person’ has the interaction which opens the modal.
Should this work? Can anybody see what I am doing wrong?
Here’s how it looks in the Designer, which is what I’m after.
Here’s a simple test I’ve done to check if it can be done, and it can. Selecting the black rectangle opens the modal. modal-popup So why can’t it work with a CMS item?
When I assigned the Interaction to the parent element I get nothing happening at all. With the Interaction assigned to the ‘wrap-person’ element, the modal opens, but just positioned incorrectly.
In my test example modal-popup, The interaction is assigned to the black box element, and it works perfectly.
Did you make further adjustments to get the modal open correctly?
I’ve rebuilt the collection output with the modal in it and reassigned the interaction to the root element (class ‘blk-50 adj-person’).
When I check the interaction in the Designer viewport, everything works as I want it to (same as in the screenshot you posted). But, when I check it in the Designer previewer, the modal’s position is relative to the root element, not the top of the page/screen. This is also what happens on the published dev page (as seen here Our People - New layout).
I know you can’t publish your test, but are you seeing the modal open to fill the whole of the Preview window when you checked it?
Yes, you’re right, the z-index value needed correcting (though that looks like a new problem in itself now), but the position is still wrong. The modal is meant to fill the whole screen, not position relative to the collection item parent. That is the problem. You’ve been giving the impression that that is what you’re seeing when you viewer things in the previewer, is it what you see in the previewer? I have a feeling, maybe it’s not?
Unless it’s just not possible to do what I want using a collection setup, I think there may be a bug involved. I’ve run this by Webflow Support, hopefully they’ll take a look.
hi @grantsenior I had a second look and it seem to be a bug.
You have “scroll into view” animation set on your collection grid item and it is blocking “fixed” position to be full screen. I have tried to assign this animation to different wrappers without any change. It looks like it is creating new stacking context but ignoring “fixed” position that should work as expected.
I have opened one of my modal examples and add "scroll into view " animation. The result was broken “fixed” modal.
The Solution to make modal work correctly is to remove “scroll into view” animation
Ugh, this appears to be the page with problems that keeps on giving.
The modal is opening correctly now, but the closing action is refusing to work. It’s pretty simple, it’s just a display:hide modal action triggered by the modal background, the close modal; ‘X’ or the modal inner.
I’ve tested quite a few different methods but the close modal action just refuses to work. It’s basically doing what I’ve set up in the simple test mentioned above (which works perfectly, the only difference being , it’s not a collection managed output), can you see what I’m doing wrong?
