Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Учимся скрывать блоки при клике за их пределами на jQuery для uCoz
24.06.14, 18:53:46



Мне сегодня очень пригодился этот простой хак, который значительно упрощает решение задачи скрытия элемента при клике по пространству за его пределами. Данное решение часто применяется при создании модальных окон, всплывающих форм входа, галерей и т.д.

За основу было взято ЭТО решение

Пример использования я создал в фидле ЗДЕСЬ

В общем, моя задача состояла в том, чтобы создать всплывающую форму входа при клике по ссылке, но потом скрывать её, если клик сделан по пространству вокруг формы.

Для начала в css вставляем:
Код
.hidelogin {  
position: absolute;  
width: 300px;  
height: 75px;  
background: #eee;  
text-align: center;  
padding: 10px;  
box-shadow: 0px 1px 2px #ccc;  
margin-top: -20px;  
display:none;  
  }  
  .hidelogin input {  
border: none;  
box-shadow: 1px 1px 3px #ddd;  
  }  
  a {  
text-decoration:none;  
color:#777  
  }


Далее пример html каркаса:
Код
<a class="login" href="javascript://">ВХОД</a>  

  <div class="hidelogin">  
<form>  
<input type="text" value="" />  
<br>  
<input type="password" value="" />  
<br>  
<input type="submit" value="Войти">  
</form>  
  </div>


Осталось только добавить скрипт, который обработает нужные нам события:
Код
$(document).ready(function () {  
  // После загрузки страницы  
$('.login').click(function () {  
  // При событии клика по ссылке с классом login  
setTimeout(function() {  
  // Через 100 миллисекунд открываем форму входа  
$('.hidelogin').fadeIn();  
}, 100);  
});  
  });  

  $(document).click(function (e) {  
  // При клике по любой части страницы  
if ($(e.target).closest(".hidelogin").length) return;  
  // Если кликали НЕ по элементу с классом hidelogin  
$(".hidelogin").fadeOut();  
  // Скрываем форму входа  
e.stopPropagation();  
  // И отключаем все события для элемента с классом hidelogin  
  });


Ко всем участкам кодов я оставил пояснения

Материал подготовлен Apocalypse
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: клике, при, их, блоки, пределами, на, JQuery, Учимся, За, скрывать
Просмотров: 436 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: