The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 
#pop:checked + .popos{
	display: block;
}
 .popos {
 	display: none;
	height: 200px;
	width: 300px;
	background: salmon;
	
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 150px);
}

.popos:before {
	content:"";
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.2);
	z-index: -1;
}

dabblet.html

<input id="pop" type="checkbox">
<div class="popos"></div>

dabblet.js

// alert('Hello world!');

settings.json

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