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

从你的shapshots， 我可以说你已经为精美的盒子添加了插件文件。

这里是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

如果您要打开外部页面，可能需要设置type的{​​{1}}，使用API​​选项，例如

content

或在您的链接中使用HTML5 $("a.fancybox").fancybox({ type: "ajax" // or "iframe" }); 属性，例如

data-fancybox-type

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

还要确保将fancybox脚本代码包装在<a data-fancybox-type="ajax" class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a> 方法中。