| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Учимся скрывать блоки при клике за их пределами на 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 | |
| Просмотров: 572 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |