Модальное окно входа в систему / регистрация на 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 () фокусируется на поле ввода и помещает курсор в конец.

 

Вот и всё!

---