Question

下午好！

我需要一些帮助。我一直在这里撞墙，无法弄清楚为什么fancybox不起作用。我正在尝试使用某些链接加载一些iframe并将它们显示在fancybox中。

我正在使用来自fancybox的默认包含。

有谁知道我做错了什么？

感谢您查看此内容。

罗斯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  <html xmlns="http://www.w3.org/1999/xhtml">  
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<script type="text/javascript" src="/lib/jquery-1.8.2.min.js"></script>   
<script type="text/javascript" src="/source/jquery.fancybox.js"></script>   
<link type="css/test" rel="stylesheet" href="/source/jquery.fancybox.css" media="screen"/>   
<script type="text/javascript">   
    $(document).ready(function() {  
        $('.fancybox').fancybox();    
    });      
</script>     
<a class="fancybox fancybox-iframe" href="/Contact.html">

Answer 1

因为您的文档以怪癖模式运行，所以无法在IE中运行。 fancybox需要标准模式才能与IE一起正常工作。

您当前的DOCTYPE声明（如上面的代码所示）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  <html xmlns="http://www.w3.org/1999/xhtml">

我想它应该是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

（您错过了正确关闭DOCTYPE声明....除非是拼写错误

此外，请更改此行：

<a class="fancybox fancybox-iframe" href="/Contact.html">

进入这个：

<a class="fancybox fancybox.iframe" href="/Contact.html"> ...</a>

......或：

<a class="fancybox" data-fancybox-type="iframe" href="/Contact.html"> ...</a>

...还要确保正确关闭<a>代码

Answer 2

尝试将脚本更改为：

$(document).ready(function(){
    $("a#featured").fancybox({
      'hideOnContentClick': true,
      'transitionIn'        : 'none',
      'transitionOut'       : 'none',
      'type'                : 'iframe'
    });
});

然后使用：

 <a id="featured" href="/Contact.html">

FancyBox 2 + IE8 / Chrome - 无法正常工作

2 个答案: