css popup demo

css-popup-demo.markdown

css popup demo

A Pen by Tayfun Erbilen on CodePen.

License.

index.html

<div class="popup-container">
	<label class="popup-button" for="login-popup">Login</label>
	<input type="checkbox" id="login-popup">
	<div class="popup">
		<label for="login-popup" class="transparent-label"></label>
		<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 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>
			</div>
		</div>
	</div>
</div>

style.scss

* {
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	padding: 25px;
}

.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;
		}
	}
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(#000,.7);
		z-index: 10;
		//display: none;
		opacity: 0;
		visibility: hidden;
		transition: 250ms all;
		.popup-inner {
			width: 400px;
			box-sizing: border-box;
			padding: 20px;
			background: #fff;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			top: 150%;
			transition: 250ms all;
			.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;
				}
			}
			.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;
							}
						}
					}
				}
			}
		}
		.transparent-label {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			cursor: pointer;
		}
	}
	>input {
		display: none;
		&:checked + .popup {
			opacity: 1;
			visibility: visible;
			.popup-inner {
				top: 50%;
			}
		}
	}
}