Fancybox 窗口未打开答案

【问题标题】：Fancybox window is not openingFancybox 窗口未打开
【发布时间】：2014-04-16 00:29:39
【问题描述】：

我正在使用以下代码在鼠标悬停时隐藏浏览器左下方显示的 url（不隐藏地址栏中的链接）。使用此类单击后，通过href方法使用时，在同一窗口中打开一个fancybox。（在此方法中，onmouseover，链接显示在左下角）。

但 Fancybox 在尝试使用按钮时无法打开（使用按钮，左下角的 url 被隐藏）。链接与地址栏中的链接在同一窗口中打开。我想通过这个onclick函数打开fancybox

代码如下

    <button class="fancy fancybox.iframe more_info_btn" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</button>

期待您的帮助

【问题讨论】：

如果你使用花式框，只需给按钮一个你想在花式框中显示的元素的id的href，不要给它一个onclick事件。
谢谢评论。你能详细解释一下吗？我是网页设计的新手。你能告诉我带有我的代码数据的示例代码吗？和 href 一样，包含 php 代码。

标签： javascript jquery hyperlink fancybox fancybox-2

【解决方案1】：

您似乎想手动打开一个fancybox。您可以使用fancybox API 方法open 打开一个fancybox。

例如，如果你想通过点击按钮打开 iframe，你可以试试这个。

HTML

<script>
  var url=<?php if(isset($data['recording_link']) && !empty($data['recording_link'])) echo $data['recording_link'];?>;
</script>   
<button onclick="openIframe(url)">test</button>

Javascript

<script>
  function openIframe(url){
    if(url){
      $.fancybox.open({type:"iframe",href:url});
    }
  }
</script>

希望对你有帮助。

【讨论】：

感谢您的帮助。但不幸的是，上面的代码不起作用。点击测试按钮，没有任何反应......
控制台有错误吗？请确保在调用之前必须定义 openIframe 函数。

【解决方案2】：

您可以使用特殊的data-fancybox-* 属性将任何标签元素（包括buttons）绑定到fancybox，所以试试这个：

<button data-fancybox-href="<?php echo $data['recording_link'];?>" class="fancy fancybox.iframe more_info_btn" >Play Recording</button>

注意我们不需要onclick 属性

见JSFIDDLE

【讨论】：

非常感谢。你解决了我的问题......我只需要提到一件事，请添加 javascript $(".fancy").fancybox();在 head 部分正确运行此代码。（这里只提一下，方便其他会员正常使用……
@drManishJoshi : 好吧，假设如果你让 fancybox 工作，不知何故你包含了脚本的那部分。不过，它也设置在提供的 jsfiddle 中。无论如何，谢谢。

【解决方案3】：

我使用了以下代码

    <button data-fancybox-href="<?php echo $data['recording_link'];?>" class="fancy fancybox.iframe more_info_btn" >Play Recording</button>

并在关闭页面头部之前添加了javascript代码，如下所示..

    <javascript>$(".fancy").fancybox();</script>

感谢 JFK (https://stackoverflow.com/users/1055987/jfk) 的大力帮助

我写了这个答案，所以将来其他成员可以使用这个代码

【讨论】：

请注意<javascript> 不是有效标签（可以用</script> 关闭）...最好使用<script> 作为开始标签。另请注意，如果您将脚本包含在文档的 <head> 部分中，最好将其包装在 .read() 方法中，例如 jQuery(document).ready(function($){$(".fancy").fancybox();});