Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   body on click или как закрыть попап при клике вне его (https://javascript.ru/forum/angular/51984-body-click-ili-kak-zakryt-popap-pri-klike-vne-ego.html)

Sufir 28.11.2014 18:05

body on click или как закрыть попап при клике вне его
 
Собственно сабж. Есть всплывающий саггест, который показывается по мере введения текста в поле поиска. А как бы правильнее реализовать его закрытие в случае клика вне его?

bes 30.11.2014 10:27

можешь повесить div во всё окно, по клику на него и скрывать

http://javascript.ru/forum/dom-windo...tml#post263176

krutoy 30.11.2014 10:58

события клика, наверное, использовать нежелательно, так как юзер может выйти из поля по табу. Может быть как-то так:
<html>
<head>
</head>
<body>

<input />
<div style="display: none">TEXT</div>

<script>

get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}

</script>
</body>
</html>

bes 30.11.2014 11:23

krutoy, доделай до рабочего
<body onbeforeunload="return 'are you sure you want to exit'">
<input />
<form>
<div style="display: none">
	<input type="submit"/>
	TEXT
</div>
</form>

<script>
get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}
</script>


<body onbeforeunload="return 'are you sure you want to exit'">
<input />
<form>
<div style="_display: none">
	<input type="submit"/>
	TEXT
</div>
</form>

<script>
get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}
</script>

krutoy 30.11.2014 12:21

bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.

bes 30.11.2014 12:26

Цитата:

Сообщение от krutoy
bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.

я к тому, что его всплывающее предложение (suggestion) может содержать другие элементы, помимо текста, например, ссылки, и переход по ним не произойдёт при клике на них

bes 30.11.2014 15:30

krutoy, куда пропал? :)

можно сделать хотя бы так
<body>
<input/>
<div style="display: none">
	<a href="http://javascript.ru">link</a>
	TEXT
</div>
<script>
window.onbeforeunload = function () {
	return "onberforeunload";
};
(function () {
	var get = document.querySelector.bind(document);
	var input = get("input");
	var div = get("div");
	input.onfocus = function () {
		div.style.display = "block";
	}
	input.onblur = function () {
		setTimeout(function () {
			div.style.display = "none";
		}, 100);
	}
})();
</script>


К тебе отдельный вопрос: сможешь объяснить почему без точки с запятой после блока window.onbeforeunload возникает ошибка?

<body>
<input/>
<div style="display: none">
	<a href="http://javascript.ru">link</a>
	TEXT
</div>
<script>
window.onbeforeunload = function () {
	return "onberforeunload";
}
(function () {
	var get = document.querySelector.bind(document);
	var input = get("input");
	var div = get("div");
	input.onfocus = function () {
		div.style.display = "block";
	}
	input.onblur = function () {
		setTimeout(function () {
			div.style.display = "none";
		}, 100);
	}
})();
//Uncaught TypeError: string is not a function
</script>

krutoy 30.11.2014 15:38

bes,
Да, это боян, потому что парсер воспринимает следующую скобку как вызов функции. Ставь точку с запятой в подобных случаях.
f=function(){alert(1)}
f
()// 1

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.

bes 30.11.2014 15:53

Цитата:

Сообщение от krutoy (Сообщение 343601)
bes,
Да, это боян, потому что парсер воспринимает следующую скобку как вызов функции. Ставь точку с запятой в подобных случаях.
f=function(){alert(1)}
f
()// 1

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.

ок, засчитано: +10 за то, что без мата :D

krutoy 30.11.2014 15:55

bes,
спасибо


Часовой пояс GMT +3, время: 02:02.