Как отобразить контент блока на всю страницу браузера?

Question

[ended]

В общем, кода не будет. Распишу условно как это в голове выглядит. Есть блок1 на странице, небольшой. В нем другой скрытый блок2 (display: none, z-index: 10) с каким то контентом. Как сделать так, что при нажатии блок1 раскрывалось содержимое блока 2 на всю страницу браузера? По типу popup окна?

Comments

[Ankhena]

В общем, кода не будет.

Не будет, так не будет.

Обрабатываете клик. Добавляете класс дочернему.
В классе пишете стили говорящие браузеру о том, что он должен быть на всю страницу браузера.

[ended]

Ankhena, обработчик клика сделан, классы расставил, стили отображения на всю страницу вписал, но контент раскрывается не на всю страницу

.popup-cont-cats {
	position: fixed;
 	width: 100vw;
 	height: 100vh;
 	background-image: url('../img/bg/bg-popup.png');
	display: none;
	z-index: 10;
}

.popup-cats{
	width: 300px;
	height: 300px;
	background-color: white;
	padding: 20px;
	margin: 40px auto 40px;
}

$("#column-left").on('click','.cats', function(){
	$(this).children().children('.popup-cont-cats').fadeIn(400);								

						});

Вот обработчик

Ниже код html

<aside id="column-left">
			<div class="cats">
					<div class="content-cats">
							<div class="popup-cont-cats">
								<div class="popup-cats">
									Здесь будет содержимое 1 категории
								</div>
							</div>
 						<div class="description-cats">
 								Выпадающй текст
 						</div>
					</div> 
			</div>
</aside>

[ended]

Ankhena, все, дописал left: 0, top: 0; контент просто не выходил за левую и верхнюю границы родительского блока. Спасибо)