0

我正在尝试使用 jQuery 和Fancybox在我的页面中实现一个简单的东西，但我无法让我的代码工作。

我需要创建一个代码，当用户单击页面的任何部分时，Fancybox 会打开一个模式。

如果你不知道什么是模态，这是一个模态。

目前，我的代码如下：

<script>
        $(document).ready(function(){
          $(document).click(function(e){
            $.fancybox.open([{
              href: '/welcome',
              title: 'Welcome to Our Website!'
            }],
            {
              width: 800,
              height: 600
            });
          });
        });
</script>

对我来说，代码很好，但是当我进入这个页面并点击页面的很多部分时，什么也没有发生。注意：控制台不显示任何错误消息，那么，我做错了什么？

4

1 回答 1

1

如果您希望用户在页面加载后（以及在他们可以与页面本身交互之前）单击页面中的任何位置时打开fancybox，请尝试

jQuery(document).ready(function ($) {
    // add fancybox class to body on page load
    $("body").addClass("fancyopen");
    // bind click to body
    $(".fancyopen").on("click", function () {
        $.fancybox([{
            href: "/yourpage.html",
            title: "welcome to our website"
        }], {
            width: 300,
            height: 200,
            type: "iframe",
            afterShow: function () {
                $(".fancybox-wrap").on("click", function (event) {
                    event.stopPropagation(); // so you can click fancybox without calling it again
                });
            },
            afterClose: function () {
                $(".fancyopen").unbind("click").removeClass("fancyopen"); // now you can interact with the page
            }
        }); // fancybox
    }); // on
}); // ready

见JSFIDDLE

于 2013-10-27T22:36:42.433 回答