Динамический попап

Недавно столкнулась с необходимостью вывода большого количества однотипных попапов, значительная часть содержимого которых была уже отображена на странице. Для того, чтобы не дублировать большую часть информации для всплывающего окна, наполнение и отображение попапа осуществлялось сразу после нажатии на кнопку вызова.
Список с однотипными блоками:

<ul>
	<li>
		<img src="img.gif"> 
		<div class="title">Заголовок 1</div>
		<div class="txt">текст 1</div>
	</li> …
</ul>

где выводится на экран картинка и заголовок, блок с классом txt скрыт и предназначен для вывода только в контенте попапа
Для начала надо подключить jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

И Вот такой скриптик

jQuery(document).ready(function($) {
	 /* создание попапа с кнокой закрытия и затемняющего блока  */
  $("body").append("<div class='overlay'></div><div id='popup'><span class='close'></span><div id='popup_inner'></div></div>");
	 /* клик по элементу списка  */
 $('li').click(function() {
	 /* очищаю содержимое попапа  */
	$("#popup_inner").empty();
	 /* теперь по очереди переношу в сплывающий блок заголовок, картинку и текст */
	$("#popup_inner").append($(this).html());
	/* отображаю затемнение*/
	$(".overlay").show();
	/* центрирую попап по высоте, т.к. блок не фиксированной высоты и отображаю*/
	var height = "-" + ($("#popup").height()+66)/2 + "px";
	$("#popup").show().animate({marginTop:height}, 500);

 });
 /* при клике на кнопку закрыть или на затемнение попап закрывается */
$(".overlay, #popup .close").click(function() {
	$(".overlay, #popup").hide();
 });
});	

Для примера верстку значительно упростила, и сразу потерялся смысл переноса поочередно блоков, поэтому можно заменить одной командой, вместо трех

	$("#popup_inner").append($(this).html());

Демонстрация рабочего примера