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

demosourse

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

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

Для начала создадим ссылки на модальные окна:

<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 (ссылка закрытия формы) изначально скрыта на лэптопах display: none;. В данном режиме отображения, для закрытия окна, привычнее кликнуть вне или нажать клавишу Esc. Для экранов мобильных устройств и планшетов — ситуация иная.

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

При переключении модальных окон мы можем задействовать одни и те же поля. Пользователь имеет право как скрывать пароль, так и отображать его. Для переключения у нас есть ссылка с классом .hide-password.

При клике по ссылке, тип поля пароля сменится (с ‘password’ на ‘text’):

$('.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');
    //помещение курсора в текстовое поле
    $password_field.putCursorAtEnd();
});

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/loginsignup-modal-window/
Перевел: Станислав Протасевич
Урок создан: 9 Февраля 2016
Просмотров: 13470
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^