The issue is that the selector .fancybox
is bound to fancybox but it's also the content of fancybox. In other words, that selector is both the trigger and the target of fancybox.
Of course, any click
on the selector and/or its contents (your <span>
) will trigger fancybox over an over again.
You need another selector to fire fancybox (that can be hidden if you prefer so) like :
<a href="#fancybox" class="fancybox" style="display: none;"><a>
Then change the div
selector from class to ID so it can be targeted by the link like :
<div id="fancybox" style="display: none;">
<span class="ChooseEnglish">English</span>
<span class="ChooseCymraeg">Cymraeg</span>
</div>
and finally the simplified script :
$(".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
See JSFIDDLE
NOTE: if you want to prevent the visitor from closing fancybox without choosing any of your (<span>
) options, then you can add modal:true
instead like :
$(".fancybox").fancybox({
// force to close clicking on any span only
modal: true
}).trigger("click");
See forked JSFIDDLE