Responsive Lightbox

dabblet.css

/**
 * Responsive Lightbox
 */
body {
	font-family: Arial, helvetica, sans-serif;
	background: #fff;
	min-height: 100%;
}

.lightbox {
	display: block;
	position: fixed;
	margin: auto;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
}

.lightbox .container-h {
	display: table;
	width: auto;
	height: 100%;
	margin: 0 auto;
}

.lightbox .container-v {
	width: 100%;
	vertical-align: middle;
	display: table-cell;
}

.lightbox .container {
	display: block;
	border-radius: 0.5em;
	border: 0.1em solid #CCC;
	background: #eee;
	padding: 1em;
	position: relative;
	min-height: 200px;
	box-sizing: border-box;
}

.lightbox header h1 {
	font-size: 1.2em;
	margin: 0 0 0.5em 0;
}

@media screen and (max-width: 300px) {
	.lightbox .container {
		width: 100%;
		border-radius: 0;
	}
}

dabblet.html

<div class="lightbox">
	<div class="container-h">
		<div class="container-v">
			<div class="container" style="width: 300px;">
				<header>
					<h1>Lightbox title</h1>
				</header>
				<div class="content">
					Lightbox content.
				</div>
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}