modal (gcyrillus)

dabblet.css

/**modal (gcyrillus)*/
#modal {outline:none;}
#modal > div  {border:solid;
position:absolute;
transform:scale(0);
left:50%;top:50%;
margin-left:-250px;
background:rgba(0,0,0,0.5);
transition:transform 1s;}
#modal:before {content:'ouvrir X';}
#modal:before, #modal #close {display:inline-block;z-index:1;border:solid;padding:0 5px;background:yellow;}
#modal:focus > div {transform:scale(1);transition: ease-in transform 1s;left:50%;top:50%;}
#modal:focus:before , #modal #close{opacity:0;}
#modal:focus #close {opacity:1;position:absolute;top:0;right:0;}
#modal > div > article {
display:table-cell;
width:500px;
height:250px;
vertical-align:middle;
text-align:center;
}

dabblet.html

<section id="modal" tabindex="0">
Bon bah voilou; une boite modale ?
	<div>
		<article><span id="close" tabindex="0"><a href="#">Fermer X</a></span>
		<h1>modal box</h1>
		<p>je suis une box madale , lol een ich speach echt goed franz !</p>
		</article>
	</div>
</section>

settings.json

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