Sorry that page had the code on it but was set to only appear on mobile.
You are right, the example you had made works perfectly for what I originally wanted.
It does sound like what I am wanting now is just a standard modal, I just want to make sure I still utilize the overflow and wrapper techniques you showed me.
I tried out your standard modal code and it seemed to be working great on mobile with chrome.
With firefox on mobile I did try to change the touch-action and it did allow me to pinch zoom but the issue where the fixed elements are all broken and oversized is still happening.
I actually spent a really long time troubleshooting this bug but the only way I got around that was by making the modal element positioning no longer fixed. That solved the zooming issue on firefox which is awesome but it seemed to cause another issue.
Now when I close the modal, the scroll bar jumps to the top of the page. This is problematic because of the stack of modal trigger links I am utilizing, it makes the user have to always scroll back down to the next image.
You can see it happening on this page where I changed the position from fixed to absolute for the modal, modal-content and close classes.
I will look for other possible modal scripts as you suggest, but I feel like what you have created is accomplishing what I want.
Thanks a lot for your help!