【问题标题】:fancybox3 Javascript Init iframefancybox3 Javascript 初始化 iframe
【发布时间】:2019-02-25 17:43:14
【问题描述】:

我在为我的 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。非常感谢您的帮助。

【问题讨论】:

    标签: javascript iframe fancybox-3


    【解决方案1】:

    我最好的猜测是您没有等待 DOM 加载。我想说把你的fancybox初始化放在document.ready

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

    【讨论】:

      【解决方案2】:

      你有语法错误,检查文档并像这样使用它 -

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

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

      $.fancybox.defaults.clickSlide = false;
      

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

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

      【讨论】:

        猜你喜欢
        • 2014-06-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-09-19
        • 1970-01-01
        • 2017-11-02
        • 2013-04-05
        • 2015-10-03
        相关资源
        最近更新 更多