body on click или как закрыть попап при клике вне его
Собственно сабж. Есть всплывающий саггест, который показывается по мере введения текста в поле поиска. А как бы правильнее реализовать его закрытие в случае клика вне его?
|
можешь повесить div во всё окно, по клику на него и скрывать
http://javascript.ru/forum/dom-windo...tml#post263176 |
события клика, наверное, использовать нежелательно, так как юзер может выйти из поля по табу. Может быть как-то так:
<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, доделай до рабочего
<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>
|
bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было. |
Цитата:
|
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>
|
bes,
Да, это боян, потому что парсер воспринимает следующую скобку как вызов функции. Ставь точку с запятой в подобных случаях.
f=function(){alert(1)}
f
()// 1
Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой. |
Цитата:
|
bes,
спасибо |
Цитата:
|
bes, krutoy, а теперь все тоже самое, но для фреймворка ангуляр :)
На раздел хоть иногда смотрите) |
Цитата:
|
Да, какой тут, собственно, тестовый код? Есть блок, который отображается, если ввести какой-то текст в поле поиска:
<div class="header-search" ng-controller="SearchFieldController">
<input ng-model="query" type="text" placeholder="ПОИСК" maxlength="32" ng-keypress="search($event)" ng-trim="true">
<div ng-if="isSuggestVisible()" class="header-search-suggest">
<!-- ... тут repeat с результатами поиска -->
</div>
</div>
$scope.isVisible = function(entity) {
return (foundedResults.length > 0);
}
Если как-то всю страницу обернуть в контроллер и isVisible хранить в $rootScope? Как-то не нравится мне такая идея... Ну, что, неужели я первый кто столкнулся с подобной задачей? Как вариант вот так: ng-blur="clearSearch()" Но если фокус теряется до окончания запроса, то саггест висеть остаётся и при клике по самому саггесту (по ссылкам) он пропадать не должен... |
$document.on('click', function (e) {
var clickedOutside = true;
for (var element = e.target; element; element = element.parentNode) {
if (element.className === "header-search-suggest" || element.className === "header-search-suggest-inner") {
clickedOutside = false;
break;
}
}
if (clickedOutside) {
$scope.clearSearch();
$scope.$apply();
}
});
|
| Часовой пояс GMT +3, время: 00:33. |