Edit in JSFiddle

$('a.launch').click(function () {
    var cnt = '#' + $(this).attr('rel');
    var pos = $(this).position()
    $(cnt).css('left', pos.left + 20);
    $(cnt).css('top', pos.top + 20);
    $(cnt).toggle();
});

$('.popup .close').click(function() {
   $(this).parent().hide(); 
});

<p>Bacon ipsum dolor <a href="#" class="launch" rel="container1">CLICK HERE TO LAUNCH FIRST POPUP</a> sit amet jowl tenderloin sirloin, tail strip steak hamburger leberkas swine tri-tip pork belly pig ham hock chicken capicola. Tail jowl prosciutto sirloin cow, fatback ground round swine shoulder chicken. Sirloin bacon ground round cow chicken pancetta kevin turkey hamburger tri-tip pork chop.</p><p>Chicken ball tip beef ribs <a href="#" class="launch" rel="container2">CLICK HERE TO LAUNCH SECOND POPUP</a> turducken pastrami turkey ribeye meatloaf leberkas. T-bone pig swine, strip steak beef ribs ball tip shoulder kielbasa frankfurter ham hock corned beef sirloin leberkas. Kevin bacon sirloin pork.</p>

<div id="container1" class="popup">
    <a href="#" class="close">x</a>
    <img src="http://icons.iconarchive.com/icons/etherbrian/bit-eat/32/Bacon-icon.png" />
    I am popup #1 and I only took a few lines of code to write.
</div>

<div id="container2" class="popup">
    <a href="#" class="close">x</a>
    <img src="http://icons.iconarchive.com/icons/etherbrian/bit-eat/32/Bacon-icon.png" />
    I am popup #2 and I only took a few lines of code to write. Turducken pastrami turkey ribeye meatloaf leberkas. T-bone pig swine, strip steak beef ribs ball tip shoulder kielbasa frankfurter ham hock corned beef sirloin leberkas. Kevin bacon sirloin pork
</div>

body { position: relative; font-family: Arial, sans-serif; font-size: 1em }
.popup { display: none; position: absolute; width: 300px; background: yellow; border: solid 1px blue; padding: 10px }
.popup .close { position: absolute; top: 0; right: 10px; font-weight: bold; color: #000 }