Popup with Pure CSS
Tags: css
Published: 2019-10-10 08:50:43

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;
```html
<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.

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f4q0bo2r5hqfpie8244d.png)

Let's continue to write to do better look :)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4haxs69mpmomwaui02jn.png)

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

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

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

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