@mmaximov97
веб-программист

Как избавиться от скачка при изменении свойства display?

При реализации новостного модуля на сайте, в котором новости отображаются во всплывающих окнах, обнаружен неприятный момент - скачок в начало страницы при изменении свойства display для блока, в котором отображаются новости. И еще вопрос: как можно привязаться к событию клика на свободной от окна области, чтобы закрывать его? Прилагаю код:
HTML
<div class="news-block" onclick="openart('article')"> 
			  	<img src="img/news/article4.jpg" alt="">
			  	<div class="news__text-preview">
			  		<!-- Превью-текст новости -->
			  	</div>
</div>
<!-- Окно новости -->.
<div class="pop-up_wrapper" id="article__wrap">
		<div class="pop-up_news-page">
			<div class="header-news">
				<img src="img/news_header.png" alt="">
				<h3>Новости</h3>
				<a href="#" class="close" onclick="closeart('article')"></a>
			</div>
<div class="article_body" id="article__content">
				<img src="img/news/article3.jpg" class="news_img" alt="">
				<h4>example</h4>
				<p>example</p>			
</div>
</div>
</div>

CSS
.pop-up_wrapper {
	position: fixed;
	z-index: 25;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}
.pop-up_news-page {
	background-color: #fff;
  	margin: 5% auto;
  	width: 1000px; 
}

JS
function openart(article){
            document.getElementById('article__wrap').style.display='block';
            document.getElementById('article__content').style.display='block';
            document.body.style.overflow='hidden';
}
function closeart(article){
            document.getElementById('article__wrap').style.display='none';
            document.getElementById('article__content').style.display='none';
            document.body.style.overflow='auto';
}

Собственно сам тестовый сайт:
test.sro01.ru
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
@inzeppelin
Судя по всему проблема в том, что вы используете ссылку (a) с якорем #

<a href="#" class="close" onclick="closeart('article')"></a>


Замените на span. Все должно работать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sinneren
@sinneren
Перед открытием считать scrollTop для body, после закрытия вернуть.
а свободная от окна область у вас же pop-up_wrapper, на неё и клик навесить для закрытия.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы