Как при клике на пустое пространство закрыть окно?

Question

[Артём Цымбалюк]

Добрый вечер, уважаемые Тостерчане.
У меня такой вопрос, JavaScript изучаю относительно не давно.
Суть, мне нужно, что бы при клике на кнопку открывался скрытый div, а потом при клике на пустую область на экране, этот div закрывался. Я смог сделать так, что бы при нажатии див открылся то есть:

$('.btn').click(function(){
    $('.search-box--mobile').show();
});

И теперь мне нужна помощь, как сделать так, что бы при нажатии на пустую область экрана, этот див закрылся? Если написать, что при нажатии на body этот див закрывался я думаю не получится из-за того, что в этом диве есть форма, и не будет ли такого, что нажав на инпуты див просто так закроется?

Answer 1

[Денис Денис]

стандартный костыль

$('.btn').click(function(){
    $('.search-box--mobile').show();
    return false;
});


$(document).click( function(event){
	if( $(event.target).closest(".search-box--mobile").length ) return;
	$(".search-box--mobile").hide();
	event.stopPropagation();
});

Comments

[Артём Цымбалюк]

Денис Ручьев спасибо большое

Answer 2

[MikeHail]

С небольшими красивостями

var on = 0; /* служебная переменная следящая за состоянием окна: 0 - значит окно закрыто ; 1 - открыто */
				/* ниже описана функция которая собственно позволяет окну появится из небытия */
				function loadPopup() {
					if(on == 0) {
						/* если переменная состояния окна равняется нулю, изменяем свойства DIV фона с именем back, а именно: задаем прозрачность opacity индексом 0.6 - данный индекс может принимать значения от 0.1 до 1 - чем больше цифра, тем меньше прозрачность, следовательно - темнее фон back */
						$("#back").css("opacity", "0.6");
						/* fadeIn - один стандартных визуальных эффектов, переводится как Из затемнения, блок popup появляется быстрее, активация темного фона back происходит медленнее   */
						$("#popup").fadeIn(500);
						$("#back").fadeIn(1500);
						/* служебная переменная переходит в состояние 1 - окно открыто */
						on = 1;
					}
					/* функция открытия окна завершена */
				}
				/* функция закрытия окна и возвращения нормального цвета фона */
				function off() {

					if(on == 1) {
						/* убираем окно-блок DIV с именем класса css "popup" с помощью эффекта Затемнение fadeOut */
						$("#popup").fadeOut("normal");
						/* возвращаем фону исходное состояние, дезактивируем затемненный фон back */
						$("#back").fadeOut("normal");
						/* не забываем про служебную переменную , возвращаем ей значение ноль */
						on = 0;
					}
					/* функция закрытия окна завершена */
				}
				/* при клике на фоне HTML страницы, вне самого окна, окно закрывается */
				$("div#back").click(function() {
					off();
				});
				/* закрыть окно при клике на блоке с классом "close", здесь у нас будет расположен крестик */
				$("div.close").click(function() {
					off();
				});

#popup {
			/* само всплывающее окно , ширину и высоту Вы можете задать на свое усмотрение , но нет смысла задавать их слишком большими, иначе окно займет весь экран, кроме того следует обратить внимание на свойство margin-left отступ слева , чтобы окно находилось по центру экрана это свойство следует указывать из расчета ширина окна деленная на два плюс два пиксела , например для ширины окна 300px, margin-left будет равняться 152px  */
			display: none;
			/*width: 700px;*/
			height:250px;
			z-index: 20;
			position: fixed;
			top: 25%;
			left: 50%;
			margin-left: -190px;
			overflow-y:auto;
			color: #000;
			background-color: #fff;
			border: 15px solid #ebeeee;
			border-radius: 15px 15px 15px 15px;
			box-shadow: 0 0 40px rgba(0, 0, 0, .3);
		}
		#back {
			/* задний фон по умолчанию не виден, его цвет черный, он занимает всё пространство по высоте и ширине, его позиция фиксирована , то есть при скроллинге он никуда не денется */
			display: none;
			height:100%;
			width:100%;
			z-index:10;
			position: fixed;
			top:0px;
			left:0px;
			background:#000;
		}
		div.close {
			/* блок с крестиком или ссылкой на закрытие окна */
			position: absolute;
			right: 8px;
			top: 0px;
			cursor: pointer;
			color: red;
			width:15px;
			height:15px;
			font-weight:bold;
		}

<div id="popup">
		<div>Ваш заказ принят.
			<br />В ближайшее время с Вами свяжется наш специалист.
		</div>
		<div class="close">[X]</div>
	</div>
	<div id="back"></div>