jQuery Fancybox - 关闭ESC按钮不起作用

时间:2016-01-28 07:39:05

标签: javascript jquery fancybox

伙计我只在一个特定页面中遇到jQuery Fancybox的问题。按下ESC时,弹出窗口不会关闭。它只发生在一个页面上。使用它的其余页面工作正常。它已被无处不在地使用

<a href="#newpopupcontainer" id="modalpopup" class="modalpopup">Link Name</a>

<div style="display:none;">
   <div id="newpopupcontainer" class="newpopupcontainer">
      Content                           
   </div>
</div>

<script>
$(document).ready(function () {
    $("a.modalpopup").fancybox({
        'titlePosition': 'inside',
        'transitionIn': 'none',
        'transitionOut': 'none'            
    });
});
</script>

<script type="text/javascript" src="~/Scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/jquery.fancybox-1.3.4.css" media="screen" />

来到jQuery版本,正在使用1.11.0。这仅在一个特定页面中发生。在所有其他页面中,按下ESC时弹出窗口关闭。知道可能的原因是什么?

1 个答案:

答案 0 :(得分:0)

较旧的Fancybox版本与最新版本的jquery不兼容。解决方案是升级到Fancybox 2.1.5,并更新一小段代码:

$("a.modalpopup").fancybox({更改为$("#modalpopup").fancybox({

这是一个工作小提琴:https://jsfiddle.net/vojyzcdb/

修改1:

要包含最新版本的Fancybox,您需要jquery.fancybox.min.cssjquery.fancybox.pack.js。这两个文件可以包含如下:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

编辑后的开始帖子中的代码在此更改后应该可以正常工作。