Lightbox with html and CSS

This is a clean way to display popup content, messages, prompts, etc, a lightbox window that is centered horizontally and vertically and shows on a transparent overlay.

It will also close when the transparent background is clicked but will still allow any other click actions inside the lightbox (e.g select text).


Sample lightbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Optionally you can change content of the lightbox by javascript before opening it:

document.getElementById('tntcode_lightbox').innerHTML = 'My text message';

Download CSS lightbox html file