0

我是 jquery 的新手，在实现花哨的盒子时遇到了很大的麻烦。我已按照用户指南的所有说明进行操作，并在互联网上搜索了许多示例。我将它绑定到代码点火器中，所以不确定这是否有所作为。

我试图仅将它用于简单 - 单击一个链接并显示一个包含内容和超链接的文本框。

我的应用程序文件夹中有一个名为“fancybox”的文件夹中的所有文件。

这是我的标题：

    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
            content:kljsadlkfajsdlfkjasdflkjads;
        });
    </script>

这是html视图：

        <div class="resources">
            <a class="fancybox" rel="group" href="#">test</a>
        </div>

谢谢您的帮助

4

2 回答 2

1

错误在于您如何调用fancybox。你的语法错误。

您需要将选项作为对象传递。

例如

// Override content
$(".fancybox").fancybox({
    content: "kljsadlkfajsdlfkjasdflkjads"
});

文档中显示了更多示例

于 2012-09-20T20:09:11.537 回答
1

如果您希望 fancybox 自动找到要显示的元素，请将该元素的 id 放入href属性中。

<a href="#box1" class="fancybox">Show box 1</a>
<div style="display:none"><div id="box1">I am in fancybox!</div></div>

和javascript：

$(document).ready(function() {
  $("a.fancybox").fancybox();
});

如果你想手动显示一个花式对话框，只需调用它：

$("#box1").fancybox();
于 2012-09-20T20:01:03.527 回答