Fancybox не закрывается при клике вне окна
Обновлено: 16.05.2024
For example, the product quick view demo on the main site. how can I make the instance close when clicking outside of the .quick-view-content div?
The text was updated successfully, but these errors were encountered:
rrcdr commented Mar 25, 2017
@nebrot thanks for the reply, but that option is not working for me. I have basically the same template as the product view demo on the main page. I can't try it out on the demo to compare because there is no code pen associated with the demo
That option is enabled by default. Maybe your content is scrollable? In that case, the closing is disabled (this will change in the next release).
rrcdr commented Mar 25, 2017
@nebrot Thanks for the reply. The content is not scrollable.
Here is my base template
Which is basically the same as the product guide demo on the main page. I also copied the css from this page. I would like fancybox to close when clicking outside of .quick-view-content but I can only get it to close when clicking within .fancybox-slide , but outside of .fancybox-placeholder .
fancyapps commented Mar 25, 2017
A live example would really help. Could you show your page?
rrcdr commented Mar 25, 2017
@fancyapps sure here is an example
flosb commented May 9, 2017 •
rrcdr,
I have the outside click issue and have adapted something from a stackoverflow fancybox2 response so that it works with fancybox 3.
Here's the code, maybe it works for you:
jQuery( document ).ready(function($) var fancyParent;
$("[data-fancybox]").fancybox(
However I had the issue of complete white screen on iPhone iPad which you seem to had to, so I reverted to fancybox 2.0.3 which doesn't have it (tried to download latest version of fancybox 2 from the official site but the link is broken so I found some .zip on the net with 2.0.3).
edit: makissm21 had the issue, not you
Fancyapps, thank you for your great plugin and continued development, it is much appreciated, REALLY! :)
I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
Right, but on all of the examples if you click outside of the modal window it closes. I want it to remain open unless the user clicks the X (no where else).
15 Answers 15
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
For this issue, please try this way
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
there is an option as in cool_dev answer below, editing the code will lead to problems when you need to update, your changes will be over-written
I ran into the same "issue". This worked for me:
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
Hope this helps :)
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
We only wanted this behavior on one of our fancy boxes so changing the source wasn't an option, Thanks!
you can prevent the fancy box to close by applying these setting
get the fancybox setting from following link
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Я использую Fancybox плагин для моих модальных окон. Кажется, независимо от того, какие параметры я использую, я не могу предотвратить закрытие модального окна fancybox, когда пользователь щелкает за пределами модального окна fancybox (серая область).
есть ли способ заставить пользователя нажать X или кнопку, которая запускает событие закрытия? Кажется, это должно быть просто, поэтому я надеюсь, что я просто читаю примеры неправильно.
Я пробовал hideOnContentClick: false но это не похоже, что это работает на меня. Есть идеи?
для этого нет опции. Вам придется изменить исходный код.
в jquery.fancybox-1.2.1.js вам нужно прокомментировать (или удалить) строку 341 в методе _finish:
Я использую fancybox 1.3.1, если вы хотите заставить пользователя закрыть модальное поле только нажав на кнопку, Вы можете указать в конфигурации:
для этой проблемы, пожалуйста, попробуйте этот путь
надеюсь, что это помогает.
Если вы используете Fancybox 1.2.6 (как я на проекте), я узнал опцию hideOnOverlayClick. Вы можете установить его в false (например, hideOnOverlayClick: false).
Я нашел эту опцию, исследуя, чтобы изменить код на основе предложения, данного Скоттом Даудингом.
я столкнулся с такой же "проблемой". Это сработало для меня:
ни один из выше работал для меня, поэтому я просто написал простой бит для последней версии fancybox.
надеюсь, что это помогает :)
задержка 400ms заставила его работать на меня. Он работал с 300ms, но я не хотел рисковать.
установить до false внутри вашей функции:
просто добавьте следующую строку в свою функцию, вам не нужно ничего менять в jquery.fancybox-1.2.6.js
вы можете предотвратить закрытие необычного окна, применив эти настройки
получите настройку fancybox по следующей ссылке
в моем случае я хотел отключить оверлейные клики, закрывающие окно, поскольку у меня была прогрессия вопросов, которые будут отображаться последовательно внутри fancybox, поэтому я не хотел, чтобы пользователи теряли свой прогресс, случайно нажав на оверлей, но хотел сохранить эту функциональность в другом месте на странице.
использовать это чтобы отключить его:
использовать это, чтобы снова включить его:
просто используйте следующий код:
вы можете установить closeClick по умолчанию на наложении в false. Работал для меня в версии 2.1.5.
Я использую Fancybox в своем приложении. Теперь для обработки события close мы пишем что-то вроде:
как видно на этой страничке документа:
однако я хочу написать что-то общее и глобальное для всех fancybox, который запускается каждый раз для любого из fancybox. Как мне это сделать? Короче говоря, я не хочу писать код onClose на каждом fancybox и не хочу,чтобы он зависел от класса, id (Напр. .fancybox в данном случае). Как мне это сделать? Я попытался написать:--4-->
но он не работает, и из документов похоже, что это функция для открытия прогамматически.
Я не уверен, что это лучшее решение, но я бы пошел на шаблон pub/sub, поэтому в вашем fancybox вы должны сделать что-то подобное.
затем, где-то в вашем коде:
Я не очень много знаю о вашей цели, но имейте в виду, что вы всегда можете передать именованную функцию вместо анонимной, поэтому вы всегда запускаете одну и ту же функцию.
приведенный выше пример должен быть путь, чтобы пойти, если вы хотите сделать разные вещи в зависимости от каждого fancybox.
кроме того, вы можете прикрепить событие к любому объекту, который вы хотите. Просто используется окно для удобства.
редактировать
вы также можете отредактировать свой источник fancybox, чтобы сделать это (изменить для 1.3.4) просто добавьте $(window).trigger('fancyboxClosed'); около линии 953.
попробуйте использовать методы
этот код работает штраф в размере
из того, что я вижу, Fancybox не предоставляет API для этого. Вместо этого вы можете использовать hack. Лайтбокс закрывается, когда:
- кнопка закрытия нажата (div с классом 'fancybox-close')
- щелкается черный фон (div с классом "fancybox-overlay")
- кнопка escape нажата (e.который = 27)
таким образом, вы можете добавить обработчик щелчка в тело, чтобы проверить событие.цель .fancybox-close или .fancybox-оверлей. Также добавить вниз обработчик документа для прослушивания при нажатии клавиши escape.
вот достойное решение для 1.3.4
для версии, отличной от 1.3.4, дважды проверьте селекторы элементов fancybox для кнопки наложения и закрытия с помощью dragonfly, firefly или других.
Я использую плагин Fancybox для своих модальных окон. Кажется, что независимо от того, какие параметры я использую, я не могу предотвратить закрытие модального окна fancybox, когда пользователь щелкает за пределами модального окна fancybox (затененная область).
Есть ли способ заставить пользователя щелкнуть X или кнопку, запускающую событие закрытия? Кажется, это должно быть просто, поэтому я надеюсь, что просто неправильно читаю примеры.
Я пробовал, hideOnContentClick: false но, похоже, у меня это не работает. Любые идеи?
Верно, но во всех примерах, если вы щелкнете за пределами модального окна, оно закроется. Я хочу, чтобы он оставался открытым, пока пользователь не нажмет X (больше нигде).
Я использую fancybox 1.3.1, если вы хотите заставить пользователя закрыть модальное окно ТОЛЬКО, нажав на кнопку, вы можете указать в конфигурации:
Для этой проблемы попробуйте этот способ
Надеюсь это поможет.
Если вы используете Fancybox 1.2.6 (например, я работаю над проектом), я обнаружил опцию hideOnOverlayClick. Вы можете установить для него значение false (например, hideOnOverlayClick: false).
Я нашел этот вариант, когда пытался изменить код на основе предложения Скотта Даудинга.
Для этого нет возможности. Вам придется изменить исходный код.
В jquery.fancybox-1.2.1.js вам нужно закомментировать (или удалить) строку 341 в методе _finish:
есть вариант, как в ответе cool_dev ниже, редактирование кода приведет к проблемам, когда вам нужно обновить, ваши изменения будут перезаписаны
Я столкнулся с той же проблемой. Это сработало для меня:
ничего из вышеперечисленного у меня не сработало, поэтому я просто написал простой фрагмент для последней версии fancybox.
Надеюсь это поможет :)
Задержка в 400 мс заставила меня работать. Он работал с 300 мс, но я не хотел рисковать.
Установите для closeClick параметра значение false внутри вашей функции:
Просто добавьте следующую строку в свою функцию, вам не нужно ничего менять в jquery.fancybox-1.2.6.js
Нам нужно было такое поведение только на одной из наших причудливых коробок, поэтому изменение источника было невозможным, спасибо!
вы можете предотвратить закрытие причудливого окна, применив эти настройки
получить настройку fancybox по следующей ссылке
В моем случае я хотел отключить щелчки наложения, закрывая окно, поскольку у меня была последовательность вопросов, которые будут последовательно отображаться внутри fancybox, поэтому я не хотел, чтобы пользователи теряли свой прогресс, случайно нажав на наложение, но хотел сохраните эту функциональность где-нибудь на странице.
Читайте также: