HOW THIS WORKS

1. We insert the link that TRIGGERS our modal content anywhere we like. But we give it a unique ID like so: "a href="#uniqueFirst">Open Modal target element that has id=uniqueFirst" That id must match the id we give to the class "modalWrapper" in step 2.
2. We put in the CONTENT for our modal window and asign it the parent class ".modalWrapper" (for any and all modals we have). Then we assign a unique id to that modal that matches the "href" of its respective trigger content. For e.g. "div class="modalWrapper" id="uniqueFirst">Our modal content will be here"

   We put our modal content just before the ending body tag. If we were to put our modal content in the same container as our modal trigger content, for example, we would run the risk of our modal content not displaying across the entire viewport. This is because the modal TRIGGER content is often surrounded by elements that restrict such placement in the wider viewport (such as "position relative" etc).

3. Using simple css we set all .modalWrapper classes to display none. That way, they don't display until we want them to.
4. This is the brilliant part. We use the css pseudo selector ":target" on our class modalWrapper (e.g. ".modalWrapper:target {}") to display: block our modalWrapper when it's respective trigger is clicked. Basically :target works a bit like javascript on click. It says: when the href "hash" in the TRIGGER URL matches the id of an element, apply these styles (one of which is "display: block"). The cool ting is that those two things don't "match" until the trigger link is actually clicked.

   It's important to remember than now the browser is following a link, whose target is our modal window whose display has now been set to "block" (and which has the display property "fixed" so it displays at the top of the VIEWPORT--wherever the window is). You can see the "link" in the broswer address bar.

5. All we have to do to close the modalWrapper is set the current href to something that no longer matches the id on the modalWrapper. That means that our "Close" button has to have an href that doesn't match (at least) the current modal's id. I've tried putting in simply "#" in the close button's href, and that closes the modal, BUT SCROLLS THE PAGE TO THE TOP OF THE WINDOW, which isn't what we want. To keep the user at the same place he was before he opened the modal, we have to put "fake text" after the hash in the close href. I've chosen "#closeModal" for contextual reasons, but it could be anything (just no the id of any modal).