Magnific popup не работает

Не закрывается модальное окно magnific-popup

Использую плагин magnific-popup для модальных окон и столкнулся с такой проблемой: как только в кнопку close вставить какое нибудь инородное изображение или svg то она тут же перестает функционировать, то есть по кнопе теперь модалка не закрывается. Все корректно работает если вставить это изображение в качестве фона для кнопки, но хочу понять почему это происходит именно с объектом внутри кнопки и как это пофиксить?

С чем это связано, сталкивался еще кто?

1 ответ 1

Очевидно, проблема заключается в том, что закрытие происходит по клику на элементе с определёнными служебными классами. В данном случае это .mfp-close.close, которые есть у button, но которых нет у img (или любого другого элемента, добавленного внутрь).

Более того, если Вы хотите использовать в качестве закрывающего элемента картинку, у Вас вообще нет нужды оставлять в разметке button — кнопку можно смело удалять. Ну и не очень понятно, к чему это абсолютное позиционирование — достаточно зафлоатить картинку вправо и задать 10-ти пиксельные маргины (плюс курсор: поинтер):

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery вёрстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

reCAPTCHA не работает во всплывающем окне magnific popup

Здравствуйте! Может кто уже сталкивался с такой проблемой.

Имеется ссылка, по клику на которую открывается всплывающее окно magnific popup, тип запроса — ajax. В подключаемом виде находится div с reCAPTCHA от Google, но капча не отображается, лишь только div тот же попадает, который требуется добавить от настроек Google по умолчанию со своим ключом ( data-sitekey ), и то его не видно (скрыт).

Может кто подскажет, как это можно решить?

Например, на сайте Касперского во всплывающем окне эта капча отлично работает.

Обновление:

1) Я пишу между тегами head:

2) Затем при открывании окна magnific popup в подключаемом виде следующий код:

Код первого пункта соответствует коду в документации Google по настройке капчи. По пункту 2, кусочек кода — — как указано в документации Google по настройке капчи.

3) В процессе открытия всплывающего окна, выполняется php код, исходя из определенного ответа, когда — $rowlog=1 — div показывается:

Капча отображается отлично, работоспособность, правда, её не проверял ещё.

4) Но, когда $rowlog=0 — div соответственно не отображается при открывании, далее выполняется вход на сайт с помощью ajax , если получен определенный ответ от сервера с помощью ajax , то с помощью jqury я добавляю этот div :

Добавляется div отлично, но $(«#html_element»).length > 0 уже не работает. Как-то можно это исправить?

Подсмотрел на одном сайте, у них капча тоже появляется точно также, как я описал. Но у них пункт 1 и 2 находится в теге head и код пункта 1 и 2 следующий:

Источник

Как запустить функцию в callback magnific popup?

На форме есть чекбокс, чек которого снимает disable с кнопки. Если форма вызывается по ajax (используется magnific popup), код не работает. Как можно его вызвать через callback? Пробовал так, не сработало.

2 ответа 2

Список обратных вызовов:

Вы можете определить обратные вызовы в опциях обратных вызовов callbacks . Кроме того, все события Magnific Popup отправляются с использованием triggerHandler в целевом элементе (или для документа, если элемент не существует).

Немного о функции обратного вызова updateStatus , используемой вами:

• data — это объект, который имеет два свойства status и text
• data.status — текущий тип состояния, может быть « loading », « error », « ready »,
• data.text — текст, который будет отображаться (например, «Loading. »)
• вы можете изменить эти свойства, чтобы динамически изменять текущий статус или его текст

Если в функцию обратного вызова вы попадаете, значит callback работает и ошибка кроется в коде идущем далее.

Убедитесь, что переменная test имеет значение, а также, что полученное значение — это то, что вы ожидали. В противном случае внесите изменения в код, чтобы получить нужный элемент.

Что-то мне подсказывает, что возможно нужно начать с простого, а именно:

Note: If nothing is returned in the setter function (ie. function(index, prop )<> ), or if undefined is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

Если в сеттер функции (т.е. function( index, prop )<>) ) ничего не возвращается, или если возвращается undefined — текущее значение не изменяется. Это полезно для выборочной установки значений, только при выполнении определенных критериев.

Попробуйте заменить на более простой код, типа .prop(‘disabled’, true); или .prop(‘disabled’, false); в зависимости от вашего кода. Опять же, возможно код работает, но получаются не те элементы. Проверьте, что в $(this).parents(‘.js-check-parent’).find(‘.js-button’) находится нужное значние.

Источник