javascript - Fancybox won't close when click spans -

i want fancybox close when either of spans clicked, seems reopening window after clicked , clicking anywhere else closes should.

<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/

thanks

alex

the issue selector .fancybox bound fancybox but it's content of fancybox. in other words, selector both trigger , target of fancybox.

of course, click on selector and/or contents (your <span>) trigger fancybox on over again.

you need selector fire fancybox (that can hidden if prefer so) :

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

then change div selector class id can targeted link :

<div id="fancybox" style="display: none;">     <span class="chooseenglish">english</span>     <span class="choosecymraeg">cymraeg</span> </div>  

and simplified script :

$(".fancybox").fancybox({     closeclick: true }).trigger("click"); // can chain fancybox , trigger methods  $(".chooseenglish, .choosecymraeg").click(function () {     $.fancybox.close(); }); // bind same click event both selectors @ once 

see jsfiddle

---

note: if want prevent visitor closing fancybox without choosing of (<span>) options, can add modal:true instead :

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

see forked jsfiddle