javascript - FancyBox 插件不起作用

Question

我的花式盒子有问题。当我单击一个链接时，花哨的框会获取内容但不显示灯箱并跳转到我应该通过 Ajax 获取其返回内容的页面。

HTML：

<a class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

JS：

$("a.fancybox").fancybox();

我的结果：

Answer 1

从你的照片来看，我可以说你没有为花哨的盒子添加插件文件。

这是 jquery 花式盒子插件的链接。只需将它们添加到您的标题标签之间

http://code.jquery.com/jquery-1.10.2.min.js

js/fancybox-1.3.4/jquery.easing-1.3.pack.js

js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js

请参阅http://fancybox.net/中的演示以获取更多信息

Answer 2

如果您要打开一个外部页面，您可能需要设置typeof content，或者使用 API 选项，例如

$("a.fancybox").fancybox({
    type: "ajax" // or "iframe"
});

或在您的链接中使用 HTML5data-fancybox-type属性，例如

<a data-fancybox-type="ajax" class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

请注意，大多数 ajax 调用需要在服务器环境中进行测试，并且可能无法在 localhost 中运行。

还要确保将您的 fancybox 脚本代码包装在.ready()方法中。