deemphasizing-blur

by Xiaoke Mao

HTML

<main>
<button>Show dialog</button>
<p>Hodor hodor HODOR! Hodor HODOR hodor, hodor HODOR hodor, hodor hodor, hodor. Hodor hodor. Hodor. Hodor. Hodor hodor... Hodor hodor hodor? Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor hodor hodor! Hodor, hodor; hodor hodor? Hodor hodor - hodor - hodor. Hodor. Hodor, hodor. Hodor. Hodor, hodor, hodor. Hodor hodor hodor hodor?! </p>

<p>Hodor hodor hodor; hodor hodor hodor! Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor; hodor hodor hodor! Hodor. Hodor hodor; hodor hodor, hodor, hodor hodor. Hodor, hodor; hodor hodor?! </p>

<p>Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor HODOR hodor, hodor hodor hodor! Hodor, HODOR hodor, hodor hodor; hodor hodor, hodor, hodor hodor. Hodor. Hodor hodor hodor hodor; hodor hodor - hodor hodor hodor! Hodor, hodor... Hodor hodor hodor?! Hodor. Hodor HODOR hodor, hodor hodor; hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor; hodor hodor?! </p>
 </main>
 <dialog>O HAI, I’m a dialog. Click on me to dismiss.</dialog>

CSS

main {
	transition: .6s;
	background: white;
}

main.de-emphasized {
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

dialog {
	position: fixed;
	top: 50%; left: 50%;
	z-index: 1;
	width: 10em;
	padding: 2em;
	margin: -5em;
	border: 1px solid silver;
	border-radius: .5em;
	box-shadow: 0 .2em .5em rgba(0,0,0,.5),
	            0 0 0 100vmax rgba(0,0,0,.2);
}

dialog:not([open]) {
	display: none;
}

body {
	font: 120%/1.6 Baskerville, Palatino, serif;
}

JavaScript

function $(sel) {
	return document.querySelector(sel);
}

var dialog = $('dialog');
var main = $('main');

$('button').onclick = function() {
	
	dialog.setAttribute('open', '');
	
	main.classList.add('de-emphasized');
}

dialog.onclick = function() {
	if (dialog.close) {
		dialog.close();
	}
	else {
		dialog.removeAttribute('open');
	}
	
	main.classList.remove('de-emphasized');
}