Fancybox:在页面的任何部分单击时,打开Fancybox [英] Fancybox: When click in any part of page open Fancybox
问题描述
我正在尝试使用jQuery和 Fancybox 在页面中实现一个简单的操作,但是我可以不要将我的代码投入工作.
I'm trying to implement a simple thing in my page using jQuery and Fancybox, but I can't put my code to work.
我需要创建一个代码,当用户点击页面的任何部分时,Fancybox会打开一个模式.
I need create a code that when user click in any part of the page, Fancybox opens a modal.
当前,我的代码如下:
<script>
$(document).ready(function(){
$(document).click(function(e){
$.fancybox.open([{
href: '/welcome',
title: 'Welcome to Our Website!'
}],
{
width: 800,
height: 600
});
});
});
</script>
对我来说,代码很不错,但是当我转到此页面并单击页面的许多部分时,没有任何反应.注意:控制台不会显示任何错误消息,所以,我在做什么错呢?
For me the code is nice, but when I go to this page and click in a lot of parts of the page, nothing happens. Note: the console don't display any error messages, so, what I'm doing wrong?
推荐答案
如果您希望在用户在页面加载后(并且他们无法与页面本身进行交互)单击页面中的任意位置时打开fancybox,请尝试
If you want fancybox to open when user clicks anywhere in your page after page load (and before they can interact with the page itself) then try
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
See JSFIDDLE
这篇关于Fancybox:在页面的任何部分单击时,打开Fancybox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!