Question

我在为iframe链接实施此解决方案时遇到问题： Fancybox3 with iFrame - prevent close on overlay click

这是我的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css">
</head>
<body>

    <a data-fancybox data-type="iframe" href="https://fancyapps.com/" target="_blank" rel="noopener">Test Box</a>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js"></script>


<script type='text/javascript'>
$.fancybox({
    clickSlide: false
});

</script>

</body>
</html>

所有库都是最新的，但是我无法获取使clickSlide正常运行的JavaScript。非常感谢您的帮助。

Answer 1

我的最佳猜测是您不是在等待DOM加载。我想说的只是将您的fancybox初始化放入document.ready

$(document).ready(function() {
  $.fancybox({
     clickSlide: false
  });
})

Answer 2

您遇到语法错误，请检查文档并像这样使用它-

$('[data-fancybox]').fancybox({
  clickSlide: false
});

https://codepen.io/anon/pen/LaYNbr?editors=1010

OR

$.fancybox.defaults.clickSlide = false;

https://codepen.io/anon/pen/KEKzaM?editors=1010

并将您的JS代码放在HTML之前或包装在$( document ).ready()

中

fancybox3 Javascript初始化iframe

2 个答案: