Почему popup окно открывается только со второго нажатия?
Добрый день.
На сайте есть множество блоков с кнопкой при нажатии на которую должен открываться magnific popup с формой.
Что бы не плодить для каждого блока свою форму, решил сделать одну, а через jq подставлять данные для попапа.
Блоков с кнопками много, а форма одна.
Через JQ повесил событие на клик кнопки по которому id с кнопки подставляется в форму и производится открытие уже отформатированной формы.
Реализация:
Html
<a href="#{id_link}" class="kredit-button popup-with-form" style="cursor:pointer;">Оформить</a> <div class="kredit_popup_form mfp-hide white-popup-block" id=""> <h2>Отправить заявку в банк</h2> <span></span> <form class="my-ajax-form"> <input type="hidden" name="form" value=""> <input type="text" name="name" placeholder="Ваше имя"> <input type="text" name="phone" placeholder="Номер телефона" required> <button>Отправить</button> </form> </div> |
<a href="#{id_link}" class="kredit-button popup-with-form" style="cursor:pointer;">Оформить</a> <div class="kredit_popup_form mfp-hide white-popup-block" id=""> <h2>Отправить заявку в банк</h2> <span></span> <form class="my-ajax-form"> <input type="hidden" name="form" value=""> <input type="text" name="name" placeholder="Ваше имя"> <input type="text" name="phone" placeholder="Номер телефона" required> <button>Отправить</button> </form> </div>
JQuery
$(window).load(function() { $(".kredit-button").click(function() { //Событие на клик по кнопке var buttonForm = $(this).attr("href").slice(1) //Берем идентификатор кнопки который служит id для popup var formName = $(this).parent("div").prev().find(".short_of_bank").text() //берем название банка соответств. нажатой кнопке var myForm = $(".kredit_popup_form") //берем нашу форму myForm.attr('id',buttonForm) //добавляем id для указания ПОПАПу myForm.find("span").text(formName) //текст в попап myForm.find("input[name='form']").val(formName) //идентификатор для формы что бы понимать с какой формы заявка $(".kredit-button").magnificPopup(); //инициализируем magnific popup }); }); |
$(window).load(function() { $(".kredit-button").click(function() { //Событие на клик по кнопке var buttonForm = $(this).attr("href").slice(1) //Берем идентификатор кнопки который служит id для popup var formName = $(this).parent("div").prev().find(".short_of_bank").text() //берем название банка соответств. нажатой кнопке var myForm = $(".kredit_popup_form") //берем нашу форму myForm.attr('id',buttonForm) //добавляем id для указания ПОПАПу myForm.find("span").text(formName) //текст в попап myForm.find("input[name='form']").val(formName) //идентификатор для формы что бы понимать с какой формы заявка $(".kredit-button").magnificPopup(); //инициализируем magnific popup }); });
В чем проблема?
При загрузке страницы вся история начинает работать только после одного нажатия на кнопку.
Т.е. заходим на сайт, нажимаем на кнопку и ничего не происходит. После этого если нажимаем еще раз то все работает как нужно.
Пробовал сделать и через отдельную функцию, и принудительное открытие popup.open(), и генерацию формы через js, все равно вся история начинает работать только после того как один раз нажмем на кнопку "Оформить".
Сайт: kredit-kg.com/bishkek/kredit-v-banke/
Help
Дополнительно:
судя по записи в доках, экземпляр magnificpopup должен быть инициализирован при document.ready, а у тебя он засунут в онклик. То есть первый клик инициализирует, второй обрабатывает. Решение - вынести инициализацию в document.ready. В код не вчитывался если что.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы понять, почему popup окно открывается только со второго нажатия, нужно проанализировать код, который отвечает за открытие окна. Возможно, проблема связана с тем, что первое нажатие не инициирует нужное действие или что-то блокирует открытие окна с первого раза.
Вот несколько возможных причин, по которым popup окно открывается только со второго нажатия:
1. Проблема с обработчиком события: возможно, обработчик события на кнопке открытия popup окна не настроен правильно или не вызывается с первого раза. Проверьте код обработчика события и убедитесь, что он работает корректно.
2. Задержка загрузки контента: если контент popup окна загружается асинхронно, то возможно, что при первом нажатии кнопки контент еще не успел загрузиться. Убедитесь, что контент загружается быстро и без задержек.
3. Конфликт с другими скриптами: возможно, что на странице есть другие скрипты, которые мешают корректной работе кода открытия popup окна. Проверьте, нет ли конфликтов между скриптами и попробуйте выявить их.
4. Неактивный элемент: возможно, что при первом нажатии кнопки на нее не навешивается нужный класс или атрибут, который отвечает за открытие popup окна. Убедитесь, что кнопка активна и все необходимые действия выполняются при первом нажатии.
Если вы все еще не можете найти причину проблемы, попробуйте создать минимальный пример кода, который демонстрирует проблему, и задайте вопрос на форуме или в сообществе разработчиков. Разработчики смогут проанализировать ваш код и помочь найти решение проблемы.