<h2>fancyBox v3.1 - Inline content</h2>
<div class="grid">
<p>
#1 - Default example
</p>
<p>
<a data-fancybox data-src="#hidden-content-a" href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-a">
<h2>Hello!</h2>
<p>You are awesome!</p>
</div>
</div>
<div class="grid">
<p>
#2 - Custom open/close animation using CSS:
</p>
<p>
<a data-fancybox data-src="#hidden-content-b" href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-b">
<h2>Hello!</h2>
<p>This is animated content! Cool, right?</p>
</div>
</div>
<div class="grid">
<p>
#3 - Modal window
</p>
<p>
<a data-fancybox data-options='{"src": "#hidden-content-c", "modal": true}' href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;max-width:600px;" id="hidden-content-c">
<h2>I'm a modal!</h2>
<p>You can close me only by pressing custom button below.</p>
<p>It would also be possible to prevent closing using `beforeClose` callback.</p>
<p><button data-fancybox-close class="btn">Close me</button></p>
</div>
</div>
<div class="grid">
<p>
#4 - Custom options: display default close button and disable touch
</p>
<p>
<a data-fancybox data-options='{"src": "#hidden-content-d", "touch": false, "smallBtn" : false}' href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;max-width:500px;" id="hidden-content-d">
<h2>¡Hola!</h2>
<p>You can chose to display small close button (customizable using `btnTpl.smallBtn` option; you can put any html here) or display the toolbar instead.</p>
</div>
</div>
<div class="grid">
<p>
#5 - Make element selectable/clickable
</p>
<p>
<a data-fancybox data-src="#hidden-content-e" href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;max-width:500px;" id="hidden-content-e">
<h2 data-selectable="true">Ciao!</h2>
<p data-selectable="true">Sometimes you would want to disable "touch" feature. <br />For example, when you want to make your content selectable.</p>
</div>
</div>
#hidden-content-b {
/* Custom styling */
max-width: 550px;
border-radius: 4px;
/* Custom transition - slide from top*/
transform: translateY(-50px);
transition: all .33s;
}
.fancybox-slide--current #hidden-content-b {
transform: translateY(0);
}
Also see: Tab Triggers