Modals

Click / Enter the buttons to open modals.

Modal 1

Without Background

Modal 2

With Background (Opacity .4)

Modal 3

With Background Full Opacity

For users using a mouse, they have to close the modal to be able to click on something else, but for users using a keyboard, they can navigate outside of the modal (when modal is opened). Still need JavaScript for certain things but the pen is about what we can achieve using CSS only, so... and about why I gave the open modal link a unique id(m$-c) is because, when our users will click/enter the close link, I want to send them back to that open link rather than sending them on the top of the page(by setting href="#"). Might be not an issue for users using a mouse (if I am the user, yes it definitely is), but for users using the keyboard, it definitely is; me just preventing that.

abs/designs/d8-modals