Contact fowm 7 на wordpress и модальное окно

Question

Contact fowm 7 на wordpress и модальное окно

Сергей Кочуров Ученик (123), на голосовании 1 год назад

Всем привет , помогите,не могу понять в чем причина . Добавил в модальное окно форму обратной связи от "Contact Form 7" и модальное окно из-за нее не закрывается . Если убрать форму, все работает . Спасибо

код js

document.getElementById('open-modal-btn').addEventListener("click",function(){
document.getElementById('my-modal').classList.add("open")
document.getElementById('close-my-modal-btn').classList.add("open")
})
document.getElementById('close-btn').addEventListener("click",function(){
document.getElementById('my-modal').classList.remove("open")
})
document.getElementById('close-my-modal-btn').addEventListener("click",function(){
document.getElementById('my-modal').classList.remove("open")
document.getElementById('close-my-modal-btn').classList.remove("open")
});

HTML
<a id="open-modal-btn" href="#">Записаться на консультацию</a>
<div class="modal" id="my-modal">
<div class="modal__box">
<h2>Предварительная консультация</h2>
<?php echo do_shortcode('[contact-form-7 id="97d706d" title="Форма"]')?>
</div>
<div class="overlay" id="close-my-modal-btn"></div>
</div>

Answer 1

Возможно, проблема связана с тем, что плагин “Contact Form 7” может предотвращать всплытие событий, которые используются для закрытия модального окна. Ваш код JavaScript реагирует на событие “click”, и если плагин “Contact Form 7” предотвращает его всплытие, то обработчики, которые должны закрыть модальное окно, не срабатывают.

Вы можете попробовать использовать метод stopPropagation() в обработчике событий формы, чтобы предотвратить всплытие события и проверить, решит ли это проблему. Вот пример кода:

 document.querySelector('.modal__box').addEventListener('click', function(event){ 
    event.stopPropagation(); 
});