Toggle Fancybox

Open one fancybox, from within open another, after the second gets closed, return to the first one.

by Salustiano Silva

HTML

<script src="http://fancyapps.com/fancybox/beta/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/beta/jquery.fancybox.css">
<a id="fancy1" href="#modal1">Abrir FancyBox 01</a>

<div style="display:none">
    <div id="modal1">
        <a id="fancy2" href="#">Abrir FancyBox 02</a>
    </div>
    <div id="modal2">
        Teste2
    </div>
</div>

JavaScript

$("#fancy1").fancybox({
  closeBtn: false,
  hideOnContentClick: true,
  padding: 0,
  fitToView: false,
  autoCenter: true,
  type: 'inline',
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.55)'
      }
    }
  }
});

$('body').on("click", '#fancy2', function() {
    $.fancybox.open({
        closeBtn: false,
        href : "#modal2",
        type : 'inline',
        afterClose: function() {
            $("#fancy1").trigger("click");
        }
    });
});