Автор

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

 

Вот и всё!


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



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

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

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


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

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


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

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


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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close