Fancybox не закрывается, когда клики пролетают

Question

Fancybox не закрывается, когда клики пролетают

0

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

<div class="fancybox" style="display: none;">
    <span class="ChooseEnglish">English</span>
    <span class="ChooseCymraeg">Cymraeg</span>
</div>    

$(".fancybox").fancybox({
    closeClick: true
});
$( ".fancybox" ).trigger( "click" );

$( ".ChooseEnglish" ).click(function() {
    $.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function() {
    $.fancybox.close();
});

http://jsfiddle.net/K8NDm/

благодаря

Alex

Alex 24 март 2014, в 19:25

Источник

Теги:

javascript

jquery

fancybox

2 ответа

0

Событие щелчка пузырится от пролета до div, поэтому fancybox снова открывается. Вы можете использовать .stopPropagation для предотвращения пузырьков:

$( ".ChooseEnglish" ).click(function(e) {
    e.stopPropagation();
    $.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function(e) {
    e.stopPropagation();
    $.fancybox.close();
});

Jason P 24 март 2014, в 16:19

Ещё вопросы

JFK · Accepted Answer · 2014-03-24T19-07-00.000Z

Проблема в том, что селектор .fancybox связан с fancybox, но также и с содержимым fancybox. Другими словами, этот селектор - это и триггер, и цель fancybox.

Конечно, любой click на селекторе и/или его содержимом (ваш <span>) снова вызовет fancybox.

Вам нужен другой селектор для запуска fancybox (который может быть скрыт, если вы этого хотите), например:

<a href="#fancybox" class="fancybox" style="display: none;"><a>

Затем измените селектор div от класса к ID, чтобы он мог быть нацелен по ссылке, например:

<div id="fancybox" style="display: none;">
    <span class="ChooseEnglish">English</span>
    <span class="ChooseCymraeg">Cymraeg</span>
</div>

и, наконец, упрощенный скрипт:

$(".fancybox").fancybox({
    closeClick: true
}).trigger("click"); // you can chain fancybox and trigger methods

$(".ChooseEnglish, .ChooseCymraeg").click(function () {
    $.fancybox.close();
}); // bind the same click event to both selectors at once

См. JSFIDDLE

ПРИМЕЧАНИЕ. Если вы хотите запретить посетителю закрывать fancybox без выбора каких-либо из ваших (<span>) параметров, то вы можете добавить modal:true вместо:

$(".fancybox").fancybox({
    // force to close clicking on any span only
    modal: true
}).trigger("click");

См. Раздел forked JSFIDDLE