Question

点击按钮（<div class="visitwebsitebtn">Click here to enter</div>）时，我试图让我的模态框（#newspopup）关闭？我试过了

<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();
 });

单击框中的类关闭fancybox

3 个答案: