Диалоговое окно на HTML5/JS

by Andrey Dobrovoi

HTML

<div class="demo">
	<div class="html5-dialog">
		<dialog id="window">
			<h3>Всем Привет!</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
			<button id="exit">Закрыть</button>
		</dialog>
		<button id="show">Открыть Окно</button>
	</div>
</div>

CSS

html, body {
	width: 100%;
	height: 100%;
}
body {
	background-color: #f3f3f3;
	margin: 0;
	display: table;
	position: relative;
}
.demo {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	margin: auto;
	width: 100%;
	height: 100%;
}

.html5-dialog dialog {
	width: 500px;
    border-radius: 3px;
}
.html5-dialog button#show {
	position: relative;
	bottom: 80px;
	background-color: #16a085;
	border-radius: 3px;
	color: #fff;
	border-width: 0;
	width: 200px;
	height: 50px;
	line-height: 50px;
}
.html5-dialog button#exit {
	background-color: #c0392b;
	border-radius: 3px;
	color: #fff;
	border-width: 0;
	width: 80px;
	height: 30px;
	line-height: 28px;
}
.html5-dialog button#show:hover {
	background-color: #1abc9c;
}
.html5-dialog button#exit:hover {
	background-color: #e74c3c;
}
.html5-dialog dialog::backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

JavaScript

(function() {  
    var dialog = document.getElementById('window');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('exit').onclick = function() {  
        dialog.close();  
    };  
})();