Before start to article, I'm sorry for my bad english. I'm still improving my self. So, let's start.
I believe, we don't need to use Javascript in many things. Popup is one of them :) In this article, we'll create popup without javascript.
So, the key thing is checkboxes. We will use checkbox
and :checked
pseudo class to create our popup.
How it look HTML codes
It looks something like this;
<div class="popup-container">
<label class="popup-button" for="login-popup">Login</label>
<input type="checkbox" id="login-popup">
<div class="popup">
<div class="popup-inner">
<div class="popup-title">
<h6>Login</h6>
<label for="login-popup" class="popup-close-btn">Close</label>
</div>
<div class="popup-content">
<!-- form -->
</div>
</div>
</div>
</div>
Let's write some CSS codes
I'm gonna use sass for better write experience.
.popup-container {
display: inline-block;
.popup-button {
background: #333;
line-height: 34px;
color: #fff;
padding: 0 20px;
border-radius: 3px;
display: block;
cursor: pointer;
&:hover {
background: #444;
}
}
// we'll continue from here
}
Okay, now our popup looks like this.
Let's continue to write to do better look :)
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000,.7);
z-index: 10;
display: none;
.popup-inner {
width: 400px;
box-sizing: border-box;
padding: 20px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.popup-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
h6 {
font-size: 18px;
font-weight: 500;
}
.popup-close-btn {
cursor: pointer;
background: #eee;
display: block;
line-height: 30px;
padding: 0 15px;
font-size: 14px;
color: #222;
border-radius: 3px;
}
}
}
}
```
{% endraw %}
Okay, it looks better now.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4haxs69mpmomwaui02jn.png)
Now, let's add form elements and do some great CSS.
{% raw %}
```html
<form action="">
<ul>
<li>
<input type="text" placeholder="Username">
</li>
<li>
<input type="password" placeholder="Password">
</li>
<li>
<button type="submit">Log in</button>
</li>
</ul>
</form>
```
```scss
.popup-content {
ul {
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
input {
width: 100%;
border: 1px solid #ddd;
border-radius: 3px;
line-height: 34px;
padding: 0 15px;
font-size: 14px;
box-sizing: border-box;
}
button {
width: 100%;
line-height: 34px;
background: #666;
color: #fff;
cursor: pointer;
border-radius: 3px;
border: none;
font-size: 14px;
&:hover {
background: #444;
}
}
}
}
}
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/983nlrimkywicre68iy7.png)
Now, looks legend :) I think we ready to implement hide/show feature to our popup with css.
Let's hide popup div and start to write CSS for checkbox.
{% raw %}
```scss
.popup {
display: none;
}
>input {
display: none;
&:checked + .popup {
display: flex;
}
}
```
{% endraw %}
Actually, that's all :) But, let's little bit improve your popup experience.
I don't wanna use hide/show, I will add animation like popup will come from bottom to top. Then when I click to close button, popup will goes to bottom again :) Let's change our css codes a little bit.
```scss
.popup {
// display: none;
opacity: 0;
visibility: hidden;
transition: 250ms all;
.popup-inner {
// top: 50%;
top: 150%;
transition: 250ms all;
}
>input {
display: none;
&:checked + .popup {
opacity: 1;
visibility: visible;
.popup-inner {
top: 50%;
}
}
}
}
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nu2em0dej9423n1sfb6j.gif)
One more thing, when we click black area, it's not closing. What we can without javascript? We'll use label tag again to hide when click to black area :)
```html
<div class="popup">
<label for="login-popup" class="transparent-label"></label>
...
</div>
```
```scss
.transparent-label {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
cursor: pointer;
}
```
That's all :) Now we have better ux.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b9kf86cvfchlozuwso8n.gif)
I believe someone already mentioned this before me, but hey "Different Ropes For Different Folks" :)
[Check out demo on Codepen](https://codepen.io/tayfunerbilen/pen/wvvKBeX)
Thanks for putting up with me.
Top comments (10)
Nice! It's worth mentioning that there's also a native HTML element
<dialog>
: css-tricks.com/some-hands-on-with-...Unfortunately it's not widely supported by browsers now: caniuse.com/#search=dialog
We're stuck with polyfills for now
Yeah also very limited for now :/
Great! What about accessibility? It's a key point of doing good pop-up, I guess?
I thinks the main accessibility problem with this approach is that the focus is not "locked" in the popup. See an overview of the current way of doing that here: stackoverflow.com/a/44481275/1789900
EDIT: also relevant developer.mozilla.org/en-US/docs/W...
Well yeah, we need to use javascript, I know, but for little things I believe we can use pure css :)
Thanks for the post! Always looking for new people to follow
Wow. That's some very smart stuff.
This is cool!
Very nice. Thank you. What I learned here is SASS.