How make a popup work
<p>I am trying to develop a popup feature when you click on an Image the image opens up as a popup. Here is the example 
<a href="http://soumghosh.com/otherProjects/natalierosscms/175-2/" rel="nofollow">http://soumghosh.com/otherProjects/natalierosscms/175-2/</a></p>

<p>Click on the first image and close it. Then click on the second image. The images are repeating. Any ideas what I am doing wrong? For some reason I am not able to post code here.</p>

<p><strong>JavaScript:</strong></p>

<pre><code>$('.alignnone').click(function(){
    $('.overlay').appendTo('body');
    $('.overlay').show();

    var popImage = $('.projectContainer').show();
    var thumbHolder = $(this).parent();
    thumbHolder.css('position', 'relative');

    $(this).clone().appendTo('.projectContainer');
    var cssAtrOne = {
        padding:'10px',
        width:'110%'
    };
    popImage.appendTo(thumbHolder).css(cssAtrOne);
});

$('.closeButton').click(function(){
    $('.overlay').hide();
    $('.projectContainer').hide();
});
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;!-- clickable image --&gt;
&lt;img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181"&gt;

&lt;!-- popup --&gt;
&lt;div class="projectContainer" style="padding: 10px; width: 110%; display: block;"&gt;
    &lt;img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png"&gt;
&lt;/div&gt;
</code></pre>
