Автор

Модальное окно входа в систему / регистрация на CSS и jQuery

Модальное окно входа в систему / регистрация на CSS и jQuery


Это модальное окно позволяет пользователям входить / регистрироваться на вашем сайте. После открытия пользователь может легко переключиться с одной формы на другую или выбрать опцию сброса пароля.

 

ДЕМО
ИСХОДНИКИ

 

Этот ресурс может быть особенно полезен, если вы хотите сделать формы входа / регистрации доступными для пользователей на каждой странице вашего сайта; Пользователи не будут перенаправлены на другую страницу и смогут продолжить выполнение задания, которое они выполняли на этой странице.

Ресурс состоит из версии модального окна, закодированной с интерфейсом.

 

Создание структуры

Мы ввели ссылки для входа / регистрации в нашем главном меню:

<nav class="main-nav">
<ul>
<!-- all your main menu links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>

Для модального окна мы создали два вложенных div, один (внешний) для покрытия всего окна, а другой для переноса форм представления.

Внутри модальности мы добавили переключатель форм:

<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->

<ul class="cd-switcher">
<li><a href="#0">Sign in</a></li>
<li><a href="#0">New account</a></li>
</ul>

</div>
</div>

И формы представления:

<div class="cd-user-modal">
<div class="cd-user-modal-container">

<!-- switcher tab here -->

<div id="cd-login">

<!-- form here -->

<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
</div>

<div id="cd-signup">

<!-- form here -->

</div>

<div id="cd-reset-password">

<!-- form here -->

<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
</div>
</div>
<a href="#0" class="cd-close-form">Close</a>
</div>

Внутри каждой формы добавлен диапазон сообщений .cd-error-message, чтобы отображать сообщения об ошибках формы (вы можете увидеть их в демоверсии, нажав обе кнопки «Войти» или «Создать учетную запись»).

 

Добавление стиля

По умолчанию модальное окно имеет visibility: hidden; и opacity: 0;.

Оба эти свойства изменены с помощью класса .is-visible.

.cd-user-modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
 
.cd-user-modal.is-visible {
  visibility: visible;
  opacity: 1;
}

В .cd-close-form (form close link) есть display: none; на ноутбуке версии. На ноутбуке было более естественным закрывать модальное окно, просто кликнув вне формы или нажав клавишу Esc. На маленьких экранах (как планшетах, так и мобильных телефонах) вокруг формы может не хватить места, поэтому тесная связь оказывается полезной.

В каждой отдельной форме мы решили скрыть текстовые метки и заменить их значками (с использованием класса .image-replace). Это не очень хорошая практика для длинных форм (мы добавили заполнительно они никогда не должны использоваться в качестве меток), но это прекрасно работает для простой формы, такой как наша (значки являются пояснительными, как метки, так что пользователи не чувствуют себя потерянными Заполнение формы).

Последнее замечание: мы устанавливаем размер шрифта для всех полей ввода в 16 пикселей. Это предотвращает автоматическое масштабирование, которое происходит на мобильных устройствах, когда поля ввода сфокусированы.

 

Обработка событий

Единственное, что стоит отметить в файле .js - это функция, которая позволяет пользователям скрывать / показывать пароль. Мы решили сделать пароль видимым по умолчанию (объявляем ввод как текстовый тип, а не тип пароля). Таким образом, мы могли бы избавиться от поля «повторить пароль» в форме регистрации. Пользователь может скрыть пароль (скажем, он находится в людном месте и хочет войти в систему), просто нажав ссылку .hide-password.

Когда пользователь нажимает эту ссылку, тип ввода пароля изменяется (от «пароля» до «текст» или наоборот):

$('.hide-password').on('click', function(){
  var $this= $(this),
    $password_field = $this.prev('input');
    
    ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
    ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
    //focus and move cursor to the end of input field
    $password_field.putCursorAtEnd();
});

Функция .putCursorAtEnd () фокусируется на поле ввода и помещает курсор в конец.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Модальное окно входа в систему / регистрация на CSS и jQuery

Несомненно меню это важнейший элемент на сайте, мы об этом уже не раз писали. Но меню зачастую веб-мастера создают достаточно простую навигацию, это не всегда правильный подход к организации материала на сайте. Если сайт сделан в минималистическом стиле, то ему не нужно объемное меню, или футуристический подход. Но для всех остальных сайтах можно по фантазировать, и создать нечто новое и уникальное. В данном уроке мы рассмотрим как создать объемное меню для сайта исключительно на CSS3.


Модальное окно входа в систему / регистрация на CSS и jQuery

Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль небольшой анимации и формируем внешний вид. В данном уроке, как вы уже догадались, мы рассмотрим как создать достаточно простую, но в тоже время весьма интересную навигацию со скользящими элементами с помощью трансформаций css и небольших заплаток jQuery. Идея состоит в том, когда пользователь наводит на желаемый пункт курсором, происходит трансформация с изменением фона активной вкладки.


Модальное окно входа в систему / регистрация на CSS и jQuery

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


Модальное окно входа в систему / регистрация на CSS и jQuery

Бывают случаи, когда вы хотите представить пользователю выбор, с фокусом веб-страницы являются разные варианты. Независимо от того, является ли это модальной навигацией или списком категорий, сегодняшний самородок вас охватывает!


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close