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>

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;
      }
    }
  }
}

Okay, it looks better now.

Now, let's add form elements and do some great CSS.

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

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

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.

.popup {
  display: none;
}

>input {
  display: none;
  &:checked + .popup {
    display: flex;
  }
}

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.

.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%;
      }
    }
  }
}

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 :)

<div class="popup">
  <label for="login-popup" class="transparent-label"></label>
  ...
</div>

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

I believe someone already mentioned this before me, but hey "Different Ropes For Different Folks" :)

Check out demo on Codepen

Thanks for putting up with me.

Comments

[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

[Ice or Fire]

We're stuck with polyfills for now

[Tayfun Erbilen]

Yeah also very limited for now :/

[Félix Dorn]

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

[Spone]

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

[Tayfun Erbilen]

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

[Samuel Odongo]

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

[Habdul Hazeez]

This is cool!

[Zeno]

Wow. That's some very smart stuff.

[grantiago]

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