The CSS modal is a topic that has been discussed much before online for a few years. This is my take on it.
Simply it is achieved by having a hidden check-box and a selection of labels for that check box that are used as buttons. Here is a simple implementation:
This is used on my new Gallery page to show Exif data for an image.
The Gallery is where I plan to post lots more photos and art. I've found that I want somewhere that I
own for storing my photos in high resolution. So I built the gallery that is designed to let each
image stand on its own. I like it.
We have a lable that can be placed anywhere on the page to open the modal. There can be as many as you want. The for informs the browser which check box it is for, in the case of my gallery pages I use generated ids and for to allow for mutple on a page.
Then, where you want the modal to appear I put in a div for readability and as container for css selectors. Inside that div goes the checkox itself. It is important it comes first.
<div><inputtype="checkbox"id="modal_12345"autocomplete="off"class="modalToggle"><labelclass="modalCloser"for="modal_12345"></label><divclass="modal"><divclass="modal__content"><div><labelfor="modal_12345"class="close_button">×</label></div><p>Modal Content Goes here </p></div></div></div>
That’s it for the markup. The modalCloser is so that users can click outside the modal and have it close. For modals that you don’t want that behaviour do not include it.