Popup with Pure CSS

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

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)

Pawel Madeja • Oct 10 '19

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

Ice or Fire • Oct 10 '19

We're stuck with polyfills for now

Tayfun Erbilen • Oct 10 '19

Yeah also very limited for now :/

Spone • Oct 12 '19 • 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...