我正在尝试使用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>
对我来说,代码很不错,但是当我转到此页面并单击页面的许多部分时,没有任何反应。注意:控制台不会显示任何错误消息,所以,我在做什么错呢?
如果您想在用户在页面加载后(以及他们与页面本身进行交互之前)在页面上的任意位置单击时打开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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句