loading...
Cover image for Popup with Pure CSS

Popup with Pure CSS

tayfunerbilen profile image Tayfun Erbilen ・3 min read

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

Okay, it looks better now.

Alt Text

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

Alt Text

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

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.transparent-label {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

That's all :) Now we have better ux.

Alt Text

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.

Discussion

pic
Editor guide
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 Author

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

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 Author

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!