jquery fancybox-предотвращение закрытия при щелчке за пределами fancybox

Я использую Fancybox плагин для моих модальных окон. Кажется, независимо от того, какие параметры я использую, я не могу предотвратить закрытие модального окна fancybox, когда пользователь щелкает за пределами модального окна fancybox (серая область).

есть ли способ заставить пользователя нажать X или кнопку, которая запускает событие закрытия? Кажется, это должно быть просто, поэтому я надеюсь, что я просто читаю примеры неправильно.

Я пробовал hideOnContentClick: false но это не похоже, что это работает на меня. Есть идеи?

10
fancybox javascript jquery modal-dialog

15 ответов

для этого нет опции. Вам придется изменить исходный код.

в jquery.fancybox-1.2.1.js вам нужно прокомментировать (или удалить) строку 341 в методе _finish:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
4
   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });
23
<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
11

Я использую fancybox 1.3.1, если вы хотите заставить пользователя закрыть модальное поле только нажав на кнопку, Вы можете указать в конфигурации:

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
7

для этой проблемы, пожалуйста, попробуйте этот путь

$("YourElement").fancybox({
 helpers: {
        overlay: { closeClick: false } //Disable click outside event
    }

надеюсь, что это помогает.

6

Если вы используете Fancybox 1.2.6 (как я на проекте), я узнал опцию hideOnOverlayClick. Вы можете установить его в false (например, hideOnOverlayClick: false).

Я нашел эту опцию, исследуя, чтобы изменить код на основе предложения, данного Скоттом Даудингом.

5

я столкнулся с такой же "проблемой". Это сработало для меня:

$("#fancybox-overlay").unbind();
3

ни один из выше работал для меня, поэтому я просто написал простой бит для последней версии fancybox.

function load(parameters) {
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>');
}

$(document).ready(function () {
    $(".various").fancybox({ 
        modal: true,
        afterLoad: load
    });
});

надеюсь, что это помогает :)

3

на $("#fancybox-overlay").unbind() решение, данное для этого вопроса @Gabriel, работает, за исключением того, что мне нужно было привязать его к fancybox после загрузки его содержимого, и я не мог немедленно развязать. Для всех, кто сталкивается с этой проблемой, следующий код решил проблему для меня:

$('.fancybox').fancybox({'afterLoad' : function() {
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});

задержка 400ms заставила его работать на меня. Он работал с 300ms, но я не хотел рисковать.

2

установить до false внутри вашей функции:

$(".video").click(function() {
    $.fancybox({
        width: 640,
        height: 385,
        helpers: { 
            overlay: {
                closeClick: false
            }
        }
    });

    return false;
});
2

просто добавьте следующую строку в свою функцию, вам не нужно ничего менять в jquery.fancybox-1.2.6.js

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
1

вы можете предотвратить закрытие необычного окна, применив эти настройки

 'showCloseButton'=>false, // hide close button from fancybox
 'hideOnOverlayClick'=>false, // outside of fancybox click disabled
 'enableEscapeButton'=>false, // disable close on escape key press

получите настройку fancybox по следующей ссылке

http://www.fancybox.net/api

1

мне пришлось использовать комбинацию всех вышеперечисленных ответов, так как все они включают ошибки. Разумеется, редактирование исходного кода не требуется.

в моем случае я хотел отключить оверлейные клики, закрывающие окно, поскольку у меня была прогрессия вопросов, которые будут отображаться последовательно внутри fancybox, поэтому я не хотел, чтобы пользователи теряли свой прогресс, случайно нажав на оверлей, но хотел сохранить эту функциональность в другом месте на странице.

использовать это чтобы отключить его:

$(".fancybox-overlay").unbind();

использовать это, чтобы снова включить его:

$(".fancybox-overlay").bind("click", $.fancybox.close);
0

просто используйте следующий код:

$(document).ready(function() {
  $("a#Mypopup").fancybox({
        "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
        "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
        "enableEscapeButton" : false  // prevents closing pressing ESCAPE key
  });
  $("a#Mypopup").trigger('click');
});

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
0

вы можете установить closeClick по умолчанию на наложении в false. Работал для меня в версии 2.1.5.

$.fancybox.helpers.overlay.defaults.closeClick=false;
-1