Responsive Lightbox

dabblet.css

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

.lightbox {
	display: block;
	position: fixed;
	margin: auto;
	width: 300px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

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

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

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

dabblet.html

<div class="lightbox">
	<div class="container-h">
	<div class="container-v"><div class="container"><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":"html"}