Почему popup не в центре, а внизу?
Popup должен появляться посередине. Подключил библиотеку Animate.js. До анимации всё работало хорошо и popup появлялся в центре. Как только добавил анимацию, он съехал вниз... Если менять свойства top и left popup смещается. Но я не пойму, как поставить его по центру, если мой код для центровки перестаёт работать из-за анимации.
$('.open-popup').click(function(e){
e.preventDefault();
$('.popup-bg').fadeIn(400);
$('html').addClass('no-scroll');
});.popup{
position: absolute;
background: #ffffff;
width: 50%;
height: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 30px;
padding-top: 60px;
border-radius: 50px;
border: 4px solid #4BB512;
}
.popup-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 200;
display: none;
}
.no-scroll{
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<section class="main">
<div class="container">
<div class="menu" id="menu">
<div class="logo">
<a href="home.html">ADVISE2.0</a>
</div>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Люди</a></li>
</ul>
<div class="btn2 open-popup"><a href="#">Добавить Эдвайс</a></div>
</div>
<div class="popup-bg">
<div class="popup animate__animated animate__bounceInLeft">
hdhdhdhdhhdhd
</div>
</div>
<div class="plot">
<div class="appeal">Вдохновись опытом других!</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>Ответы (2 шт):
Автор решения: Иван Ипатов
→ Ссылка
Немного отредактировал ваш CSS:
$('.open-popup').click(function(e){
e.preventDefault();
$('.popup-bg').fadeIn(400);
$('html').addClass('no-scroll');
});.popup {
background: #ffffff;
width: 50%;
height: 70%;
padding: 30px;
padding-top: 60px;
border-radius: 50px;
border: 4px solid #4bb512;
}
.popup-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 200;
display: none;
}
.no-scroll {
overflow: hidden;
}
.popup__wrapper {
display: flex;,
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<section class="main">
<div class="container">
<div class="menu" id="menu">
<div class="logo">
<a href="home.html">ADVISE2.0</a>
</div>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Люди</a></li>
</ul>
<div class="btn2 open-popup"><a href="#">Добавить Эдвайс</a></div>
</div>
<div class="popup-bg">
<div class="popup__wrapper">
<div class="popup animate__animated animate__bounceInLeft">
hdhdhdhdhhdhd
</div>
</div>
</div>
<div class="plot">
<div class="appeal">Вдохновись опытом других!</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>В современной вёрстке, как по мне, стоит использовать такие методы как flex или grid, так как есть адаптивность и проблем меньше. Учтите, я выравнивал дочерний элемент .popup, а родительский у него .popup__wrapper.
Также в код был добавлен дополнительный элемент .popup__wrapper для сохранения стилей .popup-bg и оцентровки. Сопутсвующие стили к нему тоже были добавлены.
Автор решения: Gleb Kemarsky
→ Ссылка
Вы центируете с помощьсю свойства transform, а анимация использует его же.
Надо либо менять анимацию, либо менять способ центровки.
Поскольку размеры попапа заданы в процентах, почему бы тогда не рассчитать оставшиеся проценты и не задать их в top и left?
А чтобы padding не портил расчёты, добавить box-sizing: border-box;.
$('.open-popup').click(function(e){
e.preventDefault();
$('.popup-bg').fadeIn(400);
$('html').addClass('no-scroll');
});body * {
box-sizing: border-box;
}
.popup{
position: absolute;
background: #ffffff;
width: 50%;
height: 70%;
left: 25%; /* = (100% - 50% width) / 2 */
top: 15%; /* = (100% - 70% height) / 2 */
/* transform: translate(-50%, -50%); */
padding: 30px;
padding-top: 60px;
border-radius: 50px;
border: 4px solid #4BB512;
}
.popup-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 200;
display: none;
}
.no-scroll{
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<section class="main">
<div class="container">
<div class="menu" id="menu">
<div class="logo">
<a href="home.html">ADVISE2.0</a>
</div>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Люди</a></li>
</ul>
<div class="btn2 open-popup"><a href="#">Добавить Эдвайс</a></div>
</div>
<div class="popup-bg">
<div class="popup animate__animated animate__bounceInLeft">
hdhdhdhdhhdhd
</div>
</div>
<div class="plot">
<div class="appeal">Вдохновись опытом других!</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
<div class="posting"><!-- весь помт целиком, включая авторов и кто постит и фото-->
<div class="whopost"> <!-- линия, кто сделал пост -->
@Amin
</div>
<div class="quoteline"> <!-- линия, включающая в себя прямоугольник с цитатой и фотку гворящего -->
<div class="rect"> <!-- прямоуг с цитатой -->
<div class="quotetext">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="quotespeaker">
-Amin Kipkeev
</div>
</div>
<div class="photo"><!-- кто говорил фотка -->
<img src="icons/user.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>