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

Question

[Михаил Максимов]

При реализации новостного модуля на сайте, в котором новости отображаются во всплывающих окнах, обнаружен неприятный момент - скачок в начало страницы при изменении свойства 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

Comments

[sinneren]

По 2 вопросу делать подложку и клик по ней.
По 1 надо всё оформлять в фидл\кодпен, никто ж не будет тут сам это делать что б увидеть о чём речь, но предположительно при наступлении клика сохранить значение scrollTop, после записать обратно

[Михаил Максимов]

sinneren, test.sro01.ru

[sinneren]

mmaximov97, ну, как я и говорил перед открытием считать scrollTop для body, после закрытия вернуть.
а свободная от окна область у вас же pop-up_wrapper, на неё и клик навесить для закрытия. и ещё на Esc было бы идеально.

[Михаил Максимов]

sinneren, спасибо! Напишите, пожалуйста, в ответы - отмечу решением.

Answer 1

[inzeppelin]

Судя по всему проблема в том, что вы используете ссылку (a) с якорем #

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

Замените на span. Все должно работать.

Comments

[sinneren]

Можно просто event.preventDefault(); если по какой-то причине нужна таки ссылка

Answer 2

[sinneren]

Перед открытием считать scrollTop для body, после закрытия вернуть.
а свободная от окна область у вас же pop-up_wrapper, на неё и клик навесить для закрытия.

Comments

[Михаил Максимов]

Если навешивать клик на wrapper, то дочерние элементы тоже являются триггерами для закрытия окна. Как этого избежать?

[sinneren]

mmaximov97, можно враппер вынести.

<div class="wrapper-modal"></div><div class="modal"></div>

ещё есть разница в событии в event.target и event.currentTarget. Я щас не вспомню точно, но один за родительный другой за вложенные. надо сранивать, что они равны.