Автор

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

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


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

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close