Fancybox 不工作，如何让 Overlay 工作

Question

我不确定为什么我的 fancybox 不工作，我有 jQuery、fancybox.css 和 fancybox.js 但我一直无法工作。我似乎也无法理解如何显示叠加层：

Fiddle: https://jsfiddle.net/jzhang172/ac5nxsup/1/

$('.section1').click(function(){
  $.fancybox({
    type: 'inline',
    href: '#fancy-about',
    helpers : {
      overlay : {
        css : {
          'background' : 'rgba(58, 42, 45, 0.95)'
        }
      }
    }
  });
});

.section1{
  background:red;
  font-size:20px;
  color:white;
  width:200px;
  height:100px;
}

<link href="https://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div class="section1">12</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>

<div style="display:none;">
  <div id="fancy-about">
    About
  </div>
</div>

Answer 1

引用是问题所在。当您运行您的演示时，您可以在 console:

中看到错误

https://fancyapps.com/fancybox/source/jquery.fancybox.css Failed to load resource: net::ERR_INSECURE_RESPONSE

https://fancyapps.com/fancybox/source/jquery.fancybox.js Failed to load resource: net::ERR_INSECURE_RESPONSE

那是因为服务器阻止了您的请求。

要解决此问题，只需替换对普通 CDN 的引用，例如 cdnjs。

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

以及工作演示：

$('.section1').click(function(){
  $.fancybox({
    type: 'inline',
    href: '#fancy-about',
    helpers : {
      overlay : {
        css : {
          'background' : 'rgba(58, 42, 45, 0.95)'
        }
      }
    }
  });
});

.section1{
  background:red;
  font-size:20px;
  color:white;
  width:200px;
  height:100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="section1">12</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>

<div style="display:none;">
  <div id="fancy-about">
    About
  </div>
</div>

http://jsbin.com/xutove/edit?html,css,js

Fancybox 不工作，如何让 Overlay 工作

Fancybox not working, how to get Overlay to work

html

javascript

css

jquery

fancybox