DEV Community

Cover image for Popup with Pure CSS
Tayfun Erbilen
Tayfun Erbilen

Posted on • Updated on

Popup with Pure CSS

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>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Okay, now our popup looks like this.

Alt Text

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.
Enter fullscreen mode Exit fullscreen mode

Top comments (10)

Collapse
 
pawelmadeja profile image
Pawel Madeja

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

Collapse
 
iceorfiresite profile image
Ice or Fire

We're stuck with polyfills for now

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

Yeah also very limited for now :/

Collapse
 
felixdorn profile image
Félix Dorn

Great! What about accessibility? It's a key point of doing good pop-up, I guess?

Collapse
 
spone profile image
Spone • Edited

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...

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen • Edited

Well yeah, we need to use javascript, I know, but for little things I believe we can use pure css :)

Collapse
 
noaudio profile image
Samuel Odongo

Thanks for the post! Always looking for new people to follow

Collapse
 
zenotds profile image
Zeno

Wow. That's some very smart stuff.

Collapse
 
ziizium profile image
Habdul Hazeez

This is cool!

Collapse
 
grantiago profile image
grantiago

Very nice. Thank you. What I learned here is SASS.