jquery - 通过单击框中的类来关闭fancybox

Question

我试图在单击按钮 ( ) 时关闭我的模式框 (#newspopup <div class="visitwebsitebtn">Click here to enter</div>)？我试过

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

    </script>

但没有成功。对此有什么想法吗？非常感谢

花式代码：

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

盒子：

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

Answer 1

尝试：

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

Answer 2

最简单的方法是将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).

Answer 3

你为什么不像这样附加你的点击处理程序？

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