Paul, this is fantastic. Thank you for your time and effort. I only know some HTML and CSS so your expertise has really saved me!
I have updated my website with your code and script.
The centering script you made works great! https://glewindesign.com/project_1.html
It seems like although you fixed the scrolling the content behind the open modal issue, a related bug appeared.
When I use google chrome and scroll around the image, it sometimes will still show the body content holding the fixed navbar that is behind the modal. It appears right where the google address bar is. When you scroll up and down, that address bar disappears to show more of the image and when that happens it will briefly show content from behind the modal?
This does not seem to happen in firefox, but the address bar does not disappear in firefox, it is in a fixed position.
So I am not exactly sure why this is happening or how to prevent it...But it seems like it has to do with google chrome having their disappearing address bar on scroll.
Also, do you think it would be possible to call the script again if I change the view from portrait to landscape on the mobile device? I ask because when I think about how users will interact, they will probably be holding their phone in portrait, click on an image, the modal opens and is centered still in portrait mode, then the user will probably position their phone to landscape mode for better viewing. When that happens it would be great if the script was activated again, because otherwise all that centering effort is not really appreciated when the image changes to landscape view.
I am wondering if this is what I should try out https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
Thanks again Paul!