Как сделать pop up из обычного дива?

Question

[PlasterTom]

Есть табы, реализованные через ссылки. Все находится во флекс контейнере, где ссылки располагаются слева, а контент ссылок справа. Можно ли на основе этого кода сделать так (для определенного медиа квери), чтобы контент отображался в виде поп апа и перекрывал собой все окно+стоял запрет на прокрутку? Хотелось бы модифицировать то, что есть, а не переделывать все.

<section class="directions" id="directions">
				<h2>Заголовок</h2>
				<div class="tabs flex">
					<ol class="tabs__links">
						<li><a href="#id1" class="tab__link_active">Some_link1</a>
						</li>
						<li><a href="#id2">Some_link2</a>
						</li>
						<li><a href="#id3">Some_link3</a>
						</li>
					</ol>
					<div class="tabs__content">
						<div class="tabs__target" id="id2">
							<h4>Подзаголовок</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
<div class="tabs__target" id="id3">
							<h4>Подзаголовок</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>

<div class="tabs__target" id="id4">
							<h4>Подзаголовок</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
</div>
</section>

Comments

[Дмитрий]

Добрый вечер.
А как Вы пытались решить задачу?
Показывайте.

[Dmitry Sokolov]

активному табу position fixed, top 0 left0 right 0 bottom 0.

на body html overflow-y hidden (PS: возможно страница проскроллится вверх!!! нужно будет еще парочку свойств дописать).

[PlasterTom]

Dmitry Sokolov, да, так и пыталась. Основная проблема в том, что страница скроллится вверх. Нужно этот скролл как-то убрать или реализовывать совсем другим путем.

[PlasterTom]

slo_nik, как Dmitry Sokolov

[Дмитрий]

PlasterTom, а как Вы делали? Где код?

[PlasterTom]

slo_nik, выше ответила, что через position: fixed.

[Дмитрий]

PlasterTom, код где? Вы показали только html, а где js?

Answer 1

[pestunov]

Такой вариант подходит?
https://www.mobila.name/post/5172c6cbb4ab3/