Смещение всего сайта при - filter: blur()

159

05 февраля 2020, 01:30

Всем привет, нужна помощь, такая у меня проблема: У меня есть страница, и я сделал блок информации который появляется при нажатии на кнопку, так вот, когда этот блок появляется, все на фоне размывается, всё кроме шапки и подвала, они находятся в другом файле и у них position: fixed. Всё бы ничего, но при срабатывании функции, всё кроме шапки и подвала смещается вниз, а смещается из-за того, что на фоне стоит изображение, а убирать его я не собираюсь, как можно это исправить?

Код и изображения:

var informationButton = document.querySelector('.testInformation'); 
document.querySelector('.wrapper').style.transition = 'filter .5s'; 
// document.querySelector('.informationBlock').style.transition = 'transform .5s;'; 
 
informationButton.onclick = function () { 
	if (checkBlur == 0) { 
		document.querySelector('.informationBlock').style.display = 'block'; 
		document.querySelector('.wrapper').style.filter = 'blur(5px)'; 
		document.querySelector('.informationBlock').style.filter = 'blur(0px) !important'; 
		setTimeout(function() { 
			document.querySelector('.informationBlock').style.transform = 'scale(1)'; 
			document.querySelector('.informationBlock').style.position = 'fixed'; 
		}, 300); 
		checkBlur++; 
	} else { 
		document.querySelector('.informationBlock').style.transform = 'scale(0.001)'; 
		setTimeout(function() { 
			document.querySelector('.wrapper').style.filter = 'blur(0px)';	 
			document.querySelector('.informationBlock').style.display = 'none'; 
			document.querySelector('.informationBlock').style.position = 'absolute'; 
		}, 300); 
		checkBlur--; 
	} 
}

* { 
    margin: 0; 
    padding: 0; 
    font-family: 'Didact Gothic', sans-serif; 
    outline: none; 
} 
 
/* Навигационная панель */ 
 
.header img { 
	background-size: cover; 
	width: 100%; 
} 
 
/* Контент */ 
 
.promoImage { 
	width: 60vh; 
	height: 60vh; 
	background: rgba(0,0,0,.5); 
	position: absolute; 
	top: 15%; 
	left: 5%; 
	z-index: 0; 
	font-size: 29px; 
	text-align: center; 
	border-radius: 8px; 
	box-shadow: 3px 4px 5px rgba(0,0,0,.6); 
} 
 
.points { 
	position: absolute; 
	top: 15%; 
	left: calc(5% + 60vh + 5%); 
	font-size: 29px; 
} 
 
.points li { 
	margin-bottom: 3vh; 
	list-style-type: circle; 
} 
 
span { 
	font-size: 35px; 
} 
 
/* Форма регистрации */ 
 
body { 
	background: rgb(9%, 12%, 95%, .4); 
} 
 
.accountForm { 
	position: relative; 
	margin-bottom: 27vh; 
	z-index: 1; 
	padding-left: 5%; 
} 
 
.accountForm form { 
	position: relative; 
	margin-top: 3%; 
} 
 
.accountForm input, .accountForm button { 
	display: block; 
} 
 
.accountForm input { 
	width: 24.5%; 
	height: 5vh; 
	font-size: 21px; 
	border-radius: 8px; 
	padding-left: .5%;  
	border: none; 
	margin-bottom: .7%; 
	box-shadow: 1px 2px 3px rgba(0,0,0,.5); 
} 
 
.accountForm button, .editPassword button { 
	width: 17%; 
	height: 6vh; 
	font-size: 21px; 
	border-radius: 15px; 
} 
 
.authBlock p { 
	font-size: 22px; 
} 
 
.authBlock a { 
	color: white; 
	text-decoration: none; 
} 
 
.authBlock a:hover { 
	color: red; 
} 
 
.accountImage { 
	width: 60vh; 
	height: 60vh; 
	background: rgba(0,0,0,.5); 
	position: absolute; 
	z-index: 0; 
	font-size: 29px; 
	text-align: center; 
	border-radius: 8px;	 
	top: 0; 
	left: 60%; 
	box-shadow: 3px 4px 5px rgba(0,0,0,.6); 
} 
 
.informationBlock { 
	width: 70%; 
	height: 70vh; 
	background: white; 
	position: absolute; 
	top: 15vh; 
	left: 15%; 
	border-radius: 8px; 
	box-shadow: 3px 4px 5px rgba(0,0,0,.6); 
	text-align: center; 
	font-size: 30px; 
	transform: scale(0.001); 
	/*transform: scale(1);*/ 
	display: none; 
	transition: transform .4s; 
} 
 
.informationBlock ul { 
	text-align: left; 
	margin-left: 4vh; 
	margin-top: 5vh; 
	line-height: 4.5vh; 
	font-size: 18px; 
}

<?php 
 
include 'configurations/topAndBottom.php'; 
include 'configurations/language.php'; 
 
?> 
 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
 
	<style type="text/css"> 
		#hellopreloader_preload{ 
			display: block; 
			position: fixed; 
			z-index: 99999; 
			top: 0; 
			left: 0; 
			width: 100%; 
			height: 100%; 
			min-width: 1000px; 
			background: #a2a5fa url(http://hello-site.ru//main/images/preloads/spinning-circles.svg) center center no-repeat; 
			background-size:41px; 
		} 
	</style> 
	<div id="hellopreloader"> 
		<div id="hellopreloader_preload"></div> 
	</div> 
	<script type="text/javascript"> 
		var hellopreloader = document.getElementById("hellopreloader_preload"); 
		document.body.style.overflow = 'hidden'; 
		function fadeOutnojquery(el){ 
			el.style.opacity = 1; 
			var interhellopreloader = setInterval(function() { 
				el.style.opacity = el.style.opacity - 0.05; 
				document.body.style.overflow = 'visible'; 
				if (el.style.opacity <= 0.05) {  
					clearInterval(interhellopreloader); 
					hellopreloader.style.display = "none"; 
				} 
			},16); 
		} 
		window.onload = function() { 
			setTimeout(function(){ 
				fadeOutnojquery(hellopreloader); 
			},1000); 
		}; 
	</script> 
 
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 
	<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet"> 
	<link rel="stylesheet" href="styles/main.css"> 
	<meta charset="UTF-8"> 
	<title><?php echo $title ?></title> 
</head> 
<body> 
	<div class="wrapper"> 
		<div class="header"> 
<!-- topLine --> 
			<img class="img" src="images/background.jpg"> 
<!-- bottomLine --> 
		</div> 
		<div class="content"> 
			<div class="promoImage"> 
				Здесь будет фото 
			</div> 
			<ul class="points"> 
				<li><?php echo $liOne ?></li> 
				<li><?php echo $liTwo ?></li> 
				<li><?php echo $liThree ?></li> 
				<span><?php echo $span ?></span> 
			</ul> 
		</div> 
		<div class="accountForm"> 
			<form> 
				<span id="createAccount"><?php echo $create ?></span><br><br> 
				<input type="text" placeholder="<?php echo $fio ?>"> 
				<input type="text" placeholder="<?php echo $class ?>"> 
				<input type="text" placeholder="<?php echo $post ?>"> 
				<input type="text" placeholder="<?php echo $password ?>"> 
				<input type="text" placeholder="<?php echo $confPassword ?>"> 
				<button><?php echo $registration ?></button> 
			</form> 
			<div class="accountImage"> 
				Здесь будет фото 
			</div> 
			<div class="authBlock"> 
				<br><br><br><p id="regForm"><?php echo $authBlock ?></p> 
			</div> 
		</div> 
	</div> 
 
	<div class="informationBlock"> 
		Информация: 
		<ul> 
			<li>Для того чтобы начать тестирование, нажмите на кнопку сообщений наверху и нажмите - Перейти</li> 
			<li>Чтобы продолжить, нажмите - Начать.</li> 
			<li>Впишите идентификатор учитиля, для того, чтобы ваш учитель потом получил уведомление.</li> 
			<li>После этого нажмите - Далее и вас перенаправят на страницу с тестированием.</li> 
			<li>На тест вам даётя 40 минут.</li> 
			<li>В тесте могут попадатся вопросы как с обычным выбором, так и с функцией перестраивания и вписывания правильного ответа.</li> 
			<li>В тесте могут попадатся от 1 и больше правильных ответов.</li> 
			<li>Если нужно вписать правильный ответ, он будет указывать только на определённый термин, вы не сможете<br>описать что-либо своими словами.</li> 
			<li>Если в тесте были найдены ошибки, просим вас срочно обратится к учителю, чтобы он исправил ошибку.</li> 
		</ul> 
	</div> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>	 
	<script src="scripts/main.js"></script> 
	<script src="scripts/smoothScroll.js"></script> 
 
</body> 
</html>

И ещё повторюсь, у меня шапка и подвал отдельно находятся, по этому при запуске кнопок не будет, но на скринах есть кнопка - Информация, она и запускает функцию.