[TL;DR] Here's the demo: Codepen
If you haven't already...
Take a look at my first post to proper understand the premise of the series: Creating a lateral menu with CSS only
Let's go...
As I did in my last article, I limited the amount of work on UI and UX for the sake of simplicity, to provide a simple and usable solution that could be easily explained and understood.
The HTML...
Simple markup, not much to explain about it:
<!DOCTYPE html>
<html>
<body>
<!-- This will trigger our modal via CSS selectors -->
<input type="checkbox" class="checkbox-modal-toggle" id="IDMODAL" />
<!-- Here we have our centered modal -->
<div class="modal">Lorem Ipsum Dolor Sit Amet Consectetur</div>
<!-- Here we have our closing label which is, in fact, the modal overlay -->
<label for="IDMODAL" class="modal-overlay"></label>
<!-- Some fake page content -->
<p>Lorem Ipsum Dolor Sit Amet Consectetur</p>
<!-- Here we have our modal trigger. I'm using the class just to put some style on it -->
<label class="modal-trigger" for="IDMODAL">Click Here To Trigger a Modal</label>
</body>
</html>
The CSS...
CSS, as in my previous post, is pretty simple as, in fact, we are just using CSS adjacent selectors ("+") to have a working CSS only modal:
html, body {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
body {
padding: 8px;
}
.modal {
position: fixed;
z-index: 2;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 300px;
height: 300px;
background-color: white;
color: black;
text-align: center;
padding: 6px;
transition: opacity 3000ms ease-in-out;
}
.checkbox-modal-toggle:checked + .modal {
display: block;
}
.modal-overlay, .checkbox-modal-toggle + .modal + label {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
background-color: #000000;
opacity: 0.4;
cursor: pointer;
}
.checkbox-modal-toggle:checked + .modal + .modal-overlay,
.checkbox-modal-toggle:checked + .modal + label {
display: block;
}
.checkbox-modal-toggle {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
.modal-trigger {
border-radius: 30px;
padding: 8px;
background: #0045ff;
color: white;
}
So there you have it.. By clicking on the trigger label, we check our invisible checkbox and, consequently, allow our modal to appear into the view with almost no effort.
Level it up a bit..
A pretty simple modal can be animated and styled however you want.
We can animate its opacity, make it drop from every side or make it do whatever we want. I'll not go further and let you experiment with it!
The JS...
It's my second post, and it's the second time you fall on this. NO JS!
Conclusion...
As the previous one, it was a nice experiment, I like experimenting and trying new things. As I already said, a simple class toggle in JS could make our life way easier, but thinking about CSS in different ways and from a different perspective can help you build a better web.
I hope you liked my post and... see you soon!
Top comments (0)