body:target {
height: 100vh;
overflow: hidden;
}
Да. Перед оберткой всего сайта.
CSS не умеет селекторы наверх и наружу. Только вниз и внутрь.
Раз всё завязано на overlay, то всё должно идти после него, чтобы можно было использовать ~ и /или + для обращения к элементам после него.
Если это чистый CSS, то нужно использовать соседние селекторы. И располагать overlay в коде ДО обертки основного содержимого, чтобы сработал этот самый соседний селектор .overlay:target + обертка
Если JS, то ему, для этой задачи, вообще без разницы как всё расположено в коде.
Разве что overlay (т.е. то, но что кликаем для закрытия) разумно делать оберткой для самой модалки.
<a href="#x" class="overlay" id="opn"></a>
<i>---до обертки</i>
<div class="popup">
<i>---после обертки</i>
<div class="fvzp">
<h2>Заголовок</h2>
<a class="close" title="Закрыть окно" href="#close"></a>
</div>
</div>Так не toggle class, а добавить. К body и к модалке.
При клике на крестик убрать класс у body и модалки.
А вообще начинал я с dreamweaver, не помню по какой причине я ушел, работала и не тупила, но я не раз пытался вернуться после Breackets, не вышло, неудобно работать, интерфейс неудобный, есть минусы которые повлияли уйти с данной программы, я тогда еще не знал что есть всякие удобные плагины, валидаторы кода всякие и т.д.
Visual Studio Code - нравиться удобством, но пока не все нюансы решил чтоб нормально работать.