Simple image modal
Simple image modal
Here is a really simple modal window that shows an image that works on mobile and desktop. If you want a minimalistic popup and don't need any fancy nav controls, this does the job. The code only contains the bare minimum that it needs to function. You would probably add a close modal link in production.
Click an image to see the popup in action. Click on the image to close it.
As with all these examples, view the source using the link below to see the HTML and CSS that accompanies the Active CSS code.
A component dynamically draws the large image inside the modal when the image is clicked, and when the modal div is closed, the image is removed from the modal.
On a production site, you would probably want put an "X" or something in the top right too, which you would put as HTML in the component itself.
HTML for the modal:
You would put this div under the body, or somewhere you can get a full-screen CSS position: fixed effect. Putting it in the middle of your page may result in only a partial full-screen effect. You may need to move it around your page and adjust the z-index in the CSS until it works for you.
<div class="str-ModalBack"></div>You could do a lot more with this example, but for a basic modal window serving an image that is easy to slot into any project, that is probably the simplest example.
Using modals in single-page applications
If you were doing a single-page application type of website, you might additionally need something like the following on the popstate event (which traps browser arrow navigation), and on this website we need to close the modal on the browser backward and forward arrows, otherwise it will just remain on the screen, as it is outside of the main page content div. You only need to do this if you are using ajax to serve your website pages. Hence you do need something like 'url-change: "#popup";' in your popup code in order to create the new page when the popup happens so that there is something there to go back to in the browser history.
window:popstate {
.str-ModalBack {
render: ""; /* Empty the modal */
}
body {
remove-class: .imgPopup; /* Close the window by removing the body class */
}
}