fancybox signal example

by guaccio2209

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div  class="signals">
     <ul>
        <li><a href="#signal1" class="fancybox">First Signal</a></li> 
         <li><a href="#signal2" class="fancybox">Second Signal</a></li>
         <li><a href="#signal3" class="fancybox">Third Signal</a></li>
         </ul>
     </div>
     
     
 
    <div id="signal1" style="display:none;"><p style="color:#000"> First comment into the #signal1 id - it will open in a fancybox -.
    </p>    
    <div id="signal2" style="display:none;"><p style="color:#000"> First comment into the #signal2 id - it will open in a fancybox -.
    </p>    
    </div>
    <div id="signal3" style="display:none;"><p style="color:#000"> Second comment for #signal3 id - it will open in a fancybox -.
        </p>    
        </div>

JavaScript

$(".fancybox").fancybox({
    openEffect  : 'fade',
    closeEffect : 'fade',
    afterLoad   : function() {
        this.inner.prepend( '<h2>Signal</h2>' );
        this.content =  this.content.html();
    }
});