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 и модалки.
А для варианта с CSS нет никакого проку от этого класса. Что с ним делать?
<body class="">
контент
</body>.overlay:target+.pd{
display:none;
}<body class="">
контент
</body><div class="ovh">
<body>
контент
</body>
</div>.overlay:target + .ovhdd{
overflow: hidden;
}