Responsive Modal Overlay/ Pop-up Image Viewer
The larger images are loaded on-demand with the help of a line of JavaScript that switches the img tag's "data-src" attribute to "src" (replacing a base64 placeholder image) when the links are clicked. And because the images are not downloaded when the page is first viewed, you get a faster page load and a welcome performance boost.
Works in modern browsers and IE8+
View the source of this page to see the HTML markup, CSS and JS.
Fullscreen 'click-to-close' Trigger
The whole of the modal overlay for this demo is a 'click-to-close' trigger, not just the small (×) at the top of the screen.
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.