У меня есть кодовая ручка здесь: https://codepen.io/tylerjms7/pen/ZEEvRyV, где я использовал псевдокласс: target как способ открытия и закрытия модального окна.
Проблема в том, что когда я беру тот же код и применяю его к сайту Wordpress здесь: https://goals.brandoncollins.org/test-target он не работает.
В основном стили не используютсяпо какой-то причине применяется к элементу: target. Но я не могу понять, почему. Странно то, что если я открою эту ссылку в новой вкладке с #creategp в конце, то стиль будет работать изначально, чтобы открыть модальное окно. Когда я щелкаю значок закрытия, он также удаляет стили и скрывает модальные объекты, как и ожидалось. Но затем повторное нажатие модального окна не будет работать так же, как и раньше.
Так почему же не применяются стили? Кроме того, почему они применяются на новой вкладке?
<a href="#creategp" class="ty-modal-launch">Open Modal</a>
<!-- The Modal -->
<div id="creategp">
<div class="ty-modal">
<a href="#close" title="Close" class="closeit">X</a>
<p>Modal Content</p>
</div>
</div>
#creategp:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
#creategp:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
Когда я запускаю это в Codepen, я получаю именно то, что хочу. Но когда я добавляю те же самые HTML и стили на свой сайт WordPress, он не работает, если я не открою его в новой вкладке. И тогда это работает только один раз.