Opening post in popup by clicking on it's shorter version - php

Question

Hi I need to create a simple popup function for wordpress site.
I got loop that is running and showing posts properly. Post when clicked should appear in popup. What I;ve got so far. Apart from adding fancybox to do it's job.
<a class="modalbox" rel="<?php echo $post->ID; ?>" href=" http://localhost/makijaz/?page_id=12">
<article> ...Wordpress post </article>
I got the one beneath from other thread, but it's not working.
$(".modalbox").on("click", function() {
var postId = $(this).prop("rel");
$(this).fancybox();
});
href in is directing to page with template with other loop. Need to Simply gram PostID (it's in rel of an ) and put it into other loop for showing in popup.
<?php
/*
Template Name: Ajax Post Handler
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
Hopefully, I've made myself clear.

Answer 1

I'm guessing your page template doesn't have a get_header and get_footer so in your example scripts won't load.
<?php
/*
Template Name: Your Temp Name
*/
get_header(); ?>

Answer 2

If you want to pass the post id so $post = get_post($_GET['id']); can fetch it, you could try
jQuery(document).ready(function ($) {
$(".modalbox").on("click", function (e) {
e.preventDefault();
var postId = $(this).prop("rel");
$.fancybox.open({
href: this.href + "&id=" + postId,
type: "ajax"
});
});
});
See JSFIDDLE