Как найти конфликт модального окна?

Question

[Андрей Филимонов]

Здравствуйте, нашёл в нете хорошее модальное окно, удалил лишнее, в codepen хорошо срабатывает тут
Но ставлю на страницу, на эту, overlay срабатывает, а окно popup не появляется. Я уж и z-index ставил на 100000000, и по очереди отключал все другие блоки и скрипты в шаблоне, но оно не появляется. Почему?

Должно всплывать при нажатии на "Подробнее":

Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. <a href="#win1">Подробнее</a>
<!-- Модальное окно справки -->
        <a href="#x" class="overlay_det" id="win1"></a>
        <div class="popup_det">
            <div class="pic-left">
                <a href="http://webformyself.com/aff/dobrovoi/practicerubber"><img src="http://dbmast.ru/wp-content/uploads/2012/11/DVD009.jpg" alt="Практический курс резиновой верстки" /></a>
            </div>
            <h2>Уважаемые друзья!</h2>
			<p>Обращаю Ваше внимание, что <strong>27</strong> ноября, мои коллеги из команды <strong>WebForMySelf</strong> запустили абсолютно новый обучающий курс:
            <h3>« Практика резиновой верстки »</h3>
            <p>Хотите, чтобы ваш сайт отображался красиво и элегантно в широкоформатных мониторах и также красиво, и аккуратно ужимался в узких?
            <h3>Тогда не тяните резину !</h3>
			<p>Видеокурс "Практика резиновой верстки сайта" - это <strong>37</strong> качественных уроков, более <strong>19</strong> часов видео с подробными инструкциями.
			<p>
			Без воды. Лишней теории. Убитого времени. Просто взять и сделать!
			
			<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>

Comments

[aleksii91]

У вас на странице присутствует другой скрипт с которым конфликтует модальник. Когда я столкнулся с этой проблемой, ошибка крылась в скрипте анимации к якорю

[aleksii91]

Почему диалоговое окно конфликтует с анимацией якоря?

Answer 1

[Виталий]

Но ставлю на страницу, на эту,

На какое действие оно у вас на странице должно всплывать ?

Comments

[Андрей Филимонов]

На нажатие "Подробнее"

"Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. Подробнее"

[Андрей Филимонов]

Добавил в вопрос код

[Виталий]

Андрей Филимонов: не срабатывает класс .overlay_det:target+.popup_det , т.е. окно сверху не вылазит. Z-index тут не причём

[Андрей Филимонов]

Виталий: а как поправить? не подскажете?

Answer 2

[Radja7]

Проблема в том что не срабатывает .overlay_det:target+.popup_det{} - этот стиль подразумевает что .popup_det будет идти непосредственно после .overlay_det, а у Вас же в коде, они разделены тегом p:

<p>В залах гимнастического клуба Balance проходят групповые и индивидуальные занятия под руководством мастеров спорта России по художественной гимнастике.<br>
Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. 
<a href="#win1">Подробнее</a><br>
        <!-- Модальное окно справки --><br>
        <a href="#x" class="overlay_det" id="win1"></a>
</p>

<div class="popup_det">контент окна<div>

Просто перенесите .overlay_det к .popup_det :

<p>В залах гимнастического клуба Balance проходят групповые и индивидуальные занятия под руководством мастеров спорта России по художественной гимнастике.<br>
Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. 
<a href="#win1">Подробнее</a><br><br>
</p>

<!-- Модальное окно справки -->
<a href="#x" class="overlay_det" id="win1"></a>
<div class="popup_det">контент окна<div>

Comments

[Андрей Филимонов]

Спасибо) проблема была в том, что текстовый редактор wordpress сам добавляет теги p и br куда считает нужным. И я смотрю, у меня в редакторе нет их, а в коде страницы есть. Поискал про эту ересь инфу, вот тут нашёл решение без плагинов https://webgyry.info/lishnie-elementyi-p-i-br-v-wo...