Задать вопрос
@PlasterTom

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

Есть табы, реализованные через ссылки. Все находится во флекс контейнере, где ссылки располагаются слева, а контент ссылок справа. Можно ли на основе этого кода сделать так (для определенного медиа квери), чтобы контент отображался в виде поп апа и перекрывал собой все окно+стоял запрет на прокрутку? Хотелось бы модифицировать то, что есть, а не переделывать все.
<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>
  • Вопрос задан
  • 192 просмотра
Подписаться 1 Простой 7 комментариев
Помогут разобраться в теме Все курсы
  • Skillbox
    JavaScript
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@pestunov
Такой вариант подходит?
https://www.mobila.name/post/5172c6cbb4ab3/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы