Fancybox not working, how to get Overlay to work

Question

I'm not sure why my fancybox isn't working, I have jQuery, fancybox.css and fancybox.js but I haven't been able to work. I also can't seem to understand how to get the overlay to show up:

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

The references are the problem. When you run your demo you can see errors in the 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

That's because the server blocks your request.

To solve this issue just replace the references to a normal CDN like 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>

And the working demo:

$('.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