Закрытие элемента по клику за пределами его области (вне элемента) в jquery

Сразу приведу пример. Представим простой интернет магазин, а именно страницу каталога с товарами. У каждого товара есть кнопка «подробнее», при нажатии на которую, появляется плашка с информацией о товаре.

Но у каждого товара есть своя такая плашка, которая скрытая и появится только по нажатии на кнопку. Так вот, окно открылось, но как его закрыть?

Можно конечно создать кнопку «закрыть», но представьте, как это не удобно. Пользователь обычно кликает за область нашего окна и вот именно так и нужно его закрывать.

Для начала, к примеру, создадим три товара, с одинаковым общим классом.

<div class="product-one">
	<button class="button">Подробнее</button><br/>
	<div class="button_div">Текст, который скрывается</div>
</div>
<div class="product-one">
	<button class="button">Подробнее</button><br/>
	<div class="button_div">Текст, который скрывается</div>
</div>
<div class="product-one">
	<button class="button">Подробнее</button><br/>
	<div class="button_div">Текст, который скрывается</div>
</div>

Затем подключаем библиотеку jquery и вставляем следующий скрипт

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.button').click(function(){
        // скрываем все блоки
		$('.button_div').css("display","none"); 
		// убираем активный класс для продукта
		$(".product-one").removeClass("product-active")
		// Показываем блок у данного продукта
		$(this).parent(".product-one").children('.button_div').css("display","block");
		// Данному продукта добавляем класс
		$(this).parent(".product-one").addClass("product-active");
	});
	
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $('.button_div'); // тут указываем класс элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
			&& div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
</script>

Также подключите стили или скройте все блоки через js

<style>
	.button_div{
		display: none;
	}
</style>

После этого, при нажатии на кнопку «подробнее» будет появляться блок с текстом, а при нажатии в любое место вне элемента, блок исчезает. Посмотрите ниже работу скрипта или скачайте его.

Демонстрация

Скачать скрипт