Fancybox：点击页面的任何部分打开Fancybox

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

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

目前，我的代码如下：

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

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

Answer 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