Добрый день уважаемые, вот столкнулся с вопросом, как сделать так что б при нажатии на объект выскакивало попап окошко по центру экрана в не зависимости от скролинга и размеров экрана устройства с которого оно будет проматриватся.
Я написал вот такое.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style>
.field {
display: block;
position: relative;
background: #0C0C0E no-repeat 50% 50%;
width: 200px;
height: 600px;
margin: 1%;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.popup-box {
position: absolute;
width: 50px;
height: 50px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
border: 2px solid white;
display: none;
}
#blackout {
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
overflow: hidden;
z-index: 999999;
left: 0;
display: none;
}
#tetra {
width: 40px;
height: 40px;
background-color: green;
}
</style>
<body>
<div class="field">
<div id='tetra'></div>
</div>
<div class="popup-box"></div>
<script>
$('body').append('<div id="blackout"></div>');
var boxWidth = 600; //// как отцентрировать ?
function centerBox() {
/* определяем нужные данные */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* Вычисляем позицию */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 50;
/* Добавляем стили к блокам */
$('.popup-box').css({
'left': disWidth + 'px',
'top': disHeight + 'px'
});
$('#blackout').css({
'width': winWidth + 'px',
'height': winHeight + 'px'
});
return false;
}
centerBox();
function showPopUpBox() {
$('#tetra').on('click', (function() {
$('.popup-box ').toggle();
$('#blackout').toggle();
}))
}
showPopUpBox();
</script>
</body>
</html>
Это эскизный набросок, выдранный из проекта, но у меня почему то оно как-то не правильно отображается.
