Закрыть fancybox, нажав на класс в поле

Question

Я пытаюсь закрыть мой modal box (#newspopup) при нажатии на кнопку (<div class="visitwebsitebtn">Click here to enter</div>)? Я попробовал

<script> 
    $(document).on('click', '.visitwebsitebtn', function() { 
    $.fancybox.close(); 
    }); 

    </script> 

но без успеха. Любые мысли по этому поводу? Большое спасибо

Fancy Код:

<script type="text/javascript"> 

function openFancybox() { 
    setTimeout(function() {$('#newspopup').trigger('click'); },2000); 

} 
$(document).ready(function() { 
    var visited = $.cookie('visited'); 
    if (visited == 'yes') { 
     return false; 
    } else { 
     openFancybox(); 
    } 
    $.cookie('visited', 'yes', { expires: 0.0001 }); 
    $('#newspopup').fancybox({ 
    helpers : { 
     overlay : { 
      css : { 
       'background' : 'rgba(58, 42, 45, 0.3)' 
      } 
     } 
    } 
}); 

}); 
</script> 

Скрипт для закрытия:

<script> 
$(document).on('click', '.visitwebsitebtn', function() { 
$.fancybox.close(); 
}); 

</script> 

Box:

<div id="newspopup" style="display:none;"> 
    <h2>Latest news</h2> 
    <p>blablabla</p> 
    <div class="visitwebsitebtn">Click here to enter</div> 
    </div> 

Answer 1

Try:

$(document).on('click', function(e) { 
    if(e.target === $('.visitwebsitebtn')[0]) { 
     $.fancybox.close(); 
    } 
}); 

Answer 2

Почему бы вам прикрепить обработчики щелчка, как это?

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

Answer 3

Проще всего связать click обработчик внутри FancyBox (afterShow) обратного вызова

$('#newspopup').fancybox({ 
    helpers: { 
     overlay: { 
      css: { 
       'background': 'rgba(58, 42, 45, 0.3)' 
      } 
     } 
    }, 
    afterShow: function() { 
     $(".visitwebsitebtn").on("click", function(){ 
      $.fancybox.close(); 
     }); 
    } 
}); 

... при условии, что кнопка с class="visitwebsitebtn" находится внутри вашего #newspopup контейнер.

Не нужно связывать дополнительные click до $(document).