Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2014, 18:05
Аватар для Sufir
Аспирант
Отправить личное сообщение для Sufir Посмотреть профиль Найти все сообщения от Sufir
 
Регистрация: 15.06.2008
Сообщений: 47

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

Последний раз редактировалось Sufir, 28.11.2014 в 18:08.
Ответить с цитированием
  #2 (permalink)  
Старый 30.11.2014, 10:27
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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

Сворачивание окна по клику в любом месте окна браузера...
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2014, 10:58
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

события клика, наверное, использовать нежелательно, так как юзер может выйти из поля по табу. Может быть как-то так:
<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>

Последний раз редактировалось krutoy, 30.11.2014 в 11:02.
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2014, 11:23
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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>
Ответить с цитированием
  #5 (permalink)  
Старый 30.11.2014, 12:21
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.
Ответить с цитированием
  #6 (permalink)  
Старый 30.11.2014, 12:26
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от krutoy
bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.
я к тому, что его всплывающее предложение (suggestion) может содержать другие элементы, помимо текста, например, ссылки, и переход по ним не произойдёт при клике на них
Ответить с цитированием
  #7 (permalink)  
Старый 30.11.2014, 15:30
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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>
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2014, 15:38
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

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

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.
Ответить с цитированием
  #9 (permalink)  
Старый 30.11.2014, 15:53
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.
ок, засчитано: +10 за то, что без мата
Ответить с цитированием
  #10 (permalink)  
Старый 30.11.2014, 15:55
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

bes,
спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Как скрыть все DIV кроме заданного ID при клике? sibfox777 Элементы интерфейса 1 24.11.2014 18:16
Как не потерять курсор при клике? qwermjk Общие вопросы Javascript 5 29.08.2014 10:44
закрыти diva при клике вне его Hugo_O Элементы интерфейса 14 21.05.2010 14:39
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27