fancybox v2.x DEMO

By JFK http://stackoverflow.com/users/1055987/jfk

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="fancybox" href="#" data-content="<p>Content 1</p>"> Click Here for Content 1</a>

<a class="fancybox" href="#" data-content="<p>Content 2</p>"> Click Here for Content 2</a>

<a class="fancybox" href="#" data-content="<p>Content 3</p>"> Click Here for Content 3</a>

<a class="fancybox" href="#" data-content="<p>Content 4</p>"> Click Here for Content 4</a>

CSS

.fancybox {display: block}

JavaScript

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        beforeLoad: function () {
            this.content = $(this.element).data("content");
        }
    });
}); // ready