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

Question

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

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

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

Answer 1

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

В jquery.fancybox-1.2.1.js вам необходимо закомментировать (или удалить) линию 341 в _finish метода:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

Answer 6

jQuery(".lightbox").fancybox({ 
     helpers  : { 
      overlay : { 
       speedIn : 0, 
       speedOut : 300, 
       opacity : 0.8, 
       css  : { 
        cursor : 'default' 
       }, 
       closeClick: false 
      } 
     }, 
    }); 

Answer 7

ни один из вышеперечисленного не работает для меня, поэтому я просто написал простой бит для последней версии 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 
    }); 
}); 

Надеется, что это помогает :)

Answer 8

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

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

Задержка 400мс получил это работает для меня. Он работал с 300 мс, но я не хотел рисковать.

Answer 9

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

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

Answer 10

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

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

Используйте это, чтобы отключить его:

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

Используйте это, чтобы включить его:

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

Answer 11

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

$(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> 

Answer 12

Установите параметр closeClick в false внутри вашей функции:

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

    return false; 
}); 

Answer 13

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

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

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

http://www.fancybox.net/api

Answer 14

Для этого вопроса на FancyBox, пожалуйста, попробуйте этот способ

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

Надеюсь, это поможет.

Answer 15

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

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