Простой popup на jquery

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

Для этого нужно в Html код написать блок overlay и popup

<div class="overlay"></div>
<div class="popup" id="popup1">
	<span class="close">X</span>
	Контент popup №1
</div>

Сама ссылка для открытия popup

<h2><span class="open_popup" rel="popup1">первый popup</span></h2>

Css код с описанием параметров этих блоков

.overlay {display:none; position:fixed; z-index:999; opacity:0.5; filter:alpha(opacity=50); top:0; right:0; left:0; bottom:0; background:#000; }
.popup {display:none; position:fixed; border:3px solid #999; background:#fff; width:194px; height:194px; top:50%; left:50%; margin:-100px 0 0 -100px; z-index:1000;  border-radius:10px; padding:30px;}
.close {display:block; width:24px; text-align:center; cursor:pointer;  height:24px; line-height:24px; background:#fff; color:red; border:3px solid red;  position:absolute; top:10px; right:10px; text-decoration:none; border-radius:3px; font-size:20px; }

где

background:#000; /* цвет затемнения */
opacity:0.5;  /* прозрачность затемнения 50% */
filter:alpha(opacity=50); /* прозрачность затемнения 50% для IE6-8 */

Подключить Jquery

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

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

	$('.open_popup').click(function() {
		var popup_id = $('#' + $(this).attr("rel"));
		$(popup_id).show();
		$('.overlay').show();
	})
	$('.popup .close, .overlay').click(function() {
		$('.overlay, .popup').hide();
	})

Архив с примером прикреплен ниже

Прикрепленный файл: popup.rar (1.09 Kb)