<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.wrapper {
width: 75%;
margin: auto;
}
.popup {
width: 30%;
background: #fff;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
display: none;
box-shadow: 2px 2px 10px #ccc;
display:
}
.overlay {
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
display: none;
}
.content {
position: relative;
padding: 30px;
}
.close {
position: absolute;
top: 10px;
right: 50px;
width: 20px;
height: 20px;
cursor: pointer;
line-height: 20px;
color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus optio, natus quae architecto cum id assumenda obcaecati laboriosam at quo iste repellendus reiciendis maiores perferendis eaque sint. Impedit, voluptate, quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam repudiandae aspernatur, molestias reprehenderit inventore nemo ipsa cupiditate tempore quas labore aut facilis dignissimos at, perspiciatis accusantium totam, error cumque, aliquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium dicta id facilis sint repudiandae distinctio minima architecto quae quam sapiente dignissimos ratione saepe, culpa nesciunt ad dolor, ipsam, temporibus in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, impedit excepturi assumenda iste architecto nemo maxime, sed recusandae illo illum nulla. Sint, cum. Voluptas omnis, provident eligendi alias atque nemo.</p>
<button class="button">Open popup</button>
</div>
<div class="popup">
<div class="content">
<div class="close">Закрыть</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis non distinctio quod, asperiores quaerat commodi sequi modi nam facere at, nisi possimus corporis iste ipsa. Adipisci nobis possimus autem facilis.
</div>
</div>
<div class="overlay"></div>
<script>
(function() {
var popup = document.querySelector('.popup'),
overlay = document.querySelector('.overlay'),
close = document.querySelector('.close'),
button = document.querySelector('.button');
button.addEventListener('click', function() {
overlay.style.display = "block";
popup.style.display = "block";
positionCenter(popup);
});
close.addEventListener('click', function() {
popup.style.display = "none";
overlay.style.display = "none";
});
function positionCenter(elem) {
var elemHeight = window.getComputedStyle(elem).height,
elemWidth = window.getComputedStyle(elem).width;
elem.style.marginTop = "-" + parseInt(elemHeight) / 2 + "px";
elem.style.marginLeft = "-" + parseInt(elemWidth) / 2 + "px";
}
})();
</script>
</body>
</html>
