<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающее окно HTML/CSS/jQuery | Verstaka.net</title>
<link rel="stylesheet" href="css/style-new.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#popup').hide();
$('#hide-layout').css({opacity: .5});
alignCenter($('#popup'));
$(window).resize(function() {
alignCenter($('#popup'));
})
$('#click-me').click(function() {
$('#hide-layout, #popup').fadeIn(300);
})
$('#btn-close, #hide-layout').click(function() {
$('#hide-layout, #popup').fadeOut(300);
})
$('#btn-yes, #btn-no').click(function() {
alert('Выполнили какое-то действие, затем скрываем окно...');
$('#hide-layout, #popup').fadeOut(300);
})
function alignCenter(elem) {
elem.css({
left: ($(window).width() - elem.width()) / 2 + 'px',
top: ($(window).height() - elem.height()) / 2 + 'px'
})
}
})
</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="wrapper">
<hgroup>
<h1>Всплывающее окно HTML/CSS/jQuery</h1>
<h2>verstaka.net</h2>
</hgroup>
<span id="click-me" class="open-popup">Кликните здесь для открытия всплывающего окна</span>
<div id="popup" class="popup">
<h2 class="popup-title">Are You Sure?</h2>
<div class="popup-content">
<p class="popup-warning">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="popup-choice">
<button id="btn-yes" class="btn-yes" unselectable="on">Yes</button>
<button id="btn-no" class="btn-no" unselectable="on">No</button>
</div>
</div>
<div id="btn-close" class="btn-close" title="Закрыть" unselectable="on"></div>
</div>
</div>
<div id="hide-layout" class="hide-layout"></div>
</body>
</html>
