Jquery 基本的Fancybox代码没有效果

我不明白为什么这个简单的代码没有运行

我错过了一些东西，但我不知道：

Html:

<span class="test" url="mapage.php">It's a test</span>

我在firebug中没有任何错误

---

Fiddle:

首先，您有嵌套的文档就绪函数

试一试

或者是上面的简称

 $(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
});

更新 工作区： 如果你想打开一个url，你需要指定fancybox类型 iframe

应该是

$(document).ready(function () {
    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

并确保在html中包含了jquery.fancybox.version.js和jquery.fancybox.version.css。

您有几个问题： 第一：您应该这样编写代码：

$(function () {
 //your code here
});

只有当jQuery准备就绪时，它才会触发您的代码

其次，在JSFIDLE中，没有加载fancybox库

你应该补充一点：

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

最后，您的url必须是图片：

就像这样：

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>

这是一个测试

---

这是因为jquery中不包括fancybox。您必须将其作为脚本标记包含到html中。如果没有，它不会被加载。看一看fancyboxI的文档，我已经更改了JSFIDLE的链接，它是你的。。。很抱歉。没问题，但为什么一定是图像？例如，如果我想加载我的页面，我不能？谢谢你的帮助我找到了我的回答：谢谢！花式盒子不必在JSFIDLE中加载。。。它应该在你自己的html中。你的url不必是图片。。。它可以是一个普通的html页面来。。。在这种情况下，需要指定iframe的类型。看我的答案。你是对的，但我不确定；我朝那个方向走；）

$(document).ready(function () {
    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

$(function () {
 //your code here
});

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>