So, I know that this kind of questions have been asked many times before but I couldn't find an appropriate answer to my question. I have a website page which has a good amount of scrollable data including images. Now I want a functionality that when I click on an image the image gets opened in a modal popup and the page scrolling gets disabled. Something like facebook, but the image if larger than the screen size, might be scrollable. Thanks for the help!!
First of all, if the image is larger than the screen, you can check the screen size and compare the image. If the image is larger, set the image width to the screen width. The height will automatically change to keep proportion.
If the height is bigger than the screen height, do the same, just with the height.
And for the disabling of the scrollbar, there is a long roundabout method using javascript.
Otherwise you can just hide scrollbar, and add a div, which is the full screen size behind the image.
The roundabout javascript way of doing it:
Once you click on an image, you can set the body width and height to the width and height of the screen and setting overflow:hidden on the body, and when you close the image, revert the style to the original. If the body did not have a height, set it to auto.
Hope this helps