Создаем на HTML и jQuery всплывающее окно формы входа

В данной статье вы узнаете, как создать форму входарегистрации при помощи HTML, CSS 3 и j Query. Для реализации popup окна требуется HTML, CSS и jQuery(Javascript). Я расскажу, как создать простую версию, а далее мы посмотрим, как ее можно улучшить.

Начало

Сначала необходимо сбросить CSS браузера и импортировать дополнительные шрифты. Я собираюсь использовать Open Sans и Varela Round, которые доступны в Google Font.

Импорт шрифтов Google:

<link href='http://fonts.googleapis.com/css?family=Varela+Round|Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

Сброс CSS и стилей веб-сайта по умолчанию:

/** Сброс*/*{ box-sizing: border-box; margin: 0; outline: none; padding: 0;}*:after,*:before { box-sizing: border-box;}/** Общие стили*/html { font-size: 16px; -webkit-text-size-adjust: 100%;   -ms-text-size-adjust: 100%;    text-rendering: optimizeLegibility;}body {    background-color: #f3f3f3;    color: rgb(165,165,165);    font-family: "Open Sans", Arial, Helvetica, sans-serif;    font-weight: 400;}

Стили разделов body и HTML можно настроить по усмотрению, это мало повлияет на создаваемую форму входа и popup окно jQuery.

Далее необходимо подключить на странице jQuery. Я использую ссылку на jQuery, но можно легко использовать локальную версию.

Ссылка на jQuery v1.10:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Создание CSS-наложения

Прежде всего, надо создать элемент наложения и контейнер для формы входа.

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

Так как его стили разделяются на две основные части, я собираюсь объяснить их по отдельности.

Сначала рассмотрим установку позиции и добавление цвета:

div.overlay {    background-color: rgba(0,0,0,.25);    bottom: 0;    left: 0;    position: fixed;    top: 0;    width: 100%;}

Разберем этот код:

  • background-color: rgba(0,0,0,.25) — использование RGBA может указать цвет и альфа-значение, альфа — это непрозрачность цвета;
  • bottom: 0 — позиционирует элемент внизу страницы;
  • left: 0 — позиционирует элемент по левому краю страницы;
  • position: fixed — при прокрутке страницы позиция элемента не изменяется;
  • top: 0 — позиционирует элемент вверху страницы;
  • width: 100% — элемент заполняет всю ширину страницы.

Вторая часть имеет flexbox CSS3, что значительно упрощает позиционирование элементов внутри контейнера. Давайте посмотрим:

div.overlay {    display: flex;    justify-content: center;}

Перед тем, как перейти к popup окну для веб-сайта, пояснение Flexbox:

  • display: flex — определяет гибкий контейнер, либо inline-flex, либо block(flex);
  • justify-content: center — выравнивает содержимое по центру.

Примечание: на момент написания данной статьи flexbox не в полном объеме поддерживался во всех основных браузерах. Если хотели бы охватить максимальное число браузеров, надо использовать префиксы:

div.overlay {    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    justify-content: center;}

Окончательный код:

div.overlay {    background-color: rgba(0,0,0,.25);    bottom: 0;    display: flex;    justify-content: center;    left: 0;    position: fixed;    top: 0;    width: 100%;}

Стили панели входа на HTML и CSS

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

div.overlay > div.login-wrapper {    align-self: center;    background-color: rgba(0,0,0,.25);    border-radius: 2px;    padding: 6px;    width: 450px;}

Большинство CSS-свойств очевидны. При помощи значения rgba мы ещё раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.

Свойство, которое требует пояснений, это align-self, так как оно довольно новое. Это связано с flexbox. align-self определяет горизонтальное выравнивание элемента, и мы задали выравнивание точно по центру.

Далее переходим к области содержимого. До сих пор мы имели дело только с полупрозрачными фонами, поэтому пришло время использовать что-то сплошное:

div.overlay > div.login-wrapper > div.login-content {    background-color: rgb(255,255,255);    border-radius: 2px;    padding: 24px;        position: relative;}

Мы используем сплошной белый фон, так что вместо rgba применили только rgb. Отступ в 24 пикселя можете без проблем настроить по усмотрению.

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

Сейчас необходимо оформить внутри панели входа заголовок( h3):

div.overlay > div.login-wrapper > div.login-content > h3 {    color: rgb(0,0,0);    font-family: 'Varela Round', sans-serif;    font-size: 1.8em;    margin: 0 0 1.25em;    padding: 0;}

Чтобы выделить заголовок, я использую черный округлый шрифт с размером 1.8 em. Использование 1.8 em задает размер шрифта относительно шрифта документа. Это называется эластичностью шрифта.

Создание кнопки закрытия

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

a.close {    background-color: rgb(204,204,204);    border-radius: 50%;    color: rgb(255,255,255);    display: block;    font-family: 'Varela Round', sans-serif;    font-size:.8em;    padding:.2em.5em;    position: absolute;    top: 1.25rem;    transition: all 400ms ease;    right: 1.25rem;}    a.close:hover {        background-color: #1bc5b3;        cursor: pointer;    }

Вот объяснение кода:

  • background-color — мы используем приятный светло-серый фон;
  • border-radius — так как мы создаем круг, нам необходимо, чтобы радиус закругления углов границы составлял 50% от высоты;
  • position: absolute — абсолютное позиционирование кнопки / ссылки, но поскольку для контейнера установлено относительное позиционирование, позиции всех элементов устанавливаются относительно него;
  • top — расстояние от верхней части формы входа — rem — относительная зависимость, которая связана с размерами шрифта;
  • transition — задает анимацию для всех свойств, используются значения 400ms ease;
  • right — расстояние от правого края экрана до формы входа.

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

Создание формы входа

Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:

form label {    color: rgb(0,0,0);    display: block;    font-family: 'Varela Round', sans-serif;    font-size: 1.25em;    margin: .75em 0;    }    form input[type="text"],    form input[type="email"],    form input[type="number"],    form input[type="search"],    form input[type="password"],    form textarea {        background-color: rgb(255,255,255);        border: 1px solid rgb( 186, 186, 186 );        border-radius: 1px;        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);        display: block;        font-size: .65em;        margin: 6px 0 12px 0;        padding: .8em .55em;            text-shadow: 0 1px 1px rgba(255, 255, 255, 1);        transition: all 400ms ease;        width: 90%;    }    form input[type="text"]:focus,    form input[type="email"]:focus,    form input[type="number"]:focus,    form input[type="search"]:focus,    form input[type="password"]:focus,    form textarea:focus,    form select:focus {         border-color: #4195fc;        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;    }        form input[type="text"]:invalid:focus,        form input[type="email"]:invalid:focus,        form input[type="number"]:invalid:focus,        form input[type="search"]:invalid:focus,        form input[type="password"]:invalid:focus,        form textarea:invalid:focus,        form select:invalid:focus {             border-color: rgb(248,66,66);            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);        }

Сначала мы определили стили для меток формы. Благодаря данному посетитель может нажать текст и перейти к соответствующему полю ввода формы. Элемент label работает непосредственно с id данных.

Перед тем, как сделать popup окно HTML , мы создаем элементы ввода данных формы. Я указал inset box-shadow , чтобы задать для них красивую внутреннюю тень.

Использование селектора :focus может указать, как будет выглядеть элемент ввода данных, когда посетитель установил в нем курсор. Надо наглядно показать, что элемент в данный момент выбран.

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

Стили кнопки входа

Стили кнопки не содержат ничего нового:

form button {    background-color: #50c1e9;    border: 1px solid rgba(0,0,0,.1);    color: rgb(255,255,255);    font-family: 'Varela Round', sans-serif;    font-size: .85em;    padding: .55em .9em;    transition: all 400ms ease;    }    form button:hover {        background-color: #1bc5b3;        cursor: pointer;    }

Для кнопки мы задали приятный синий фон с полупрозрачной темной рамкой. Этот прием может не менять цвет границы, когда мы изменяем цвет фона. Мы также установили для кнопки стандартную CSS-анимацию перехода при смене цвета фона.

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

HTML-код формы входа

До сих пор все пояснения касались стилей CSS . Сейчас пришло время вкратце рассмотреть разметку. В том числе и HTML popup окна.

В форме используются элементы HTML 5 , так что убедитесь, что doctype задан верно:

<!doctype html>

Если хотели бы обеспечить полную совместимость со старыми версиями браузеров и поддержку HTML 5 , включите приведенную ниже ссылку на Javascript в разделе head документа:

<!--HTML 5 + IE HACK--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Полный HTML-код формы входа:

<div class="overlay" style="display: none;">    <div class="login-wrapper">        <div class="login-content">            <a class="close">x</a>            <h3>Sign in</h3>            <form method="post" action="login.php">                <label for="username">                    Имя посетителя:                    <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{8,20}$" required="required" />                </label>                <label for="password">                    Пароль:                    <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required="required" />                </label>                <button type="submit">Sign in</button>            </form>        </div>    </div></div>

Важно отметить, что мы используем для окна наложения атрибут style=»display: none;» . Это важно, когда речь идет о Javascript / jQuery .

При использовании этого способа для всего веб-сайта надо разместить код внутри элемента body .

jQuery / Javascript

Мы будем использовать библиотеку jQuery для создания JavaScript popup окна. Это популярный в интернете эффект, он используется такими веб-сайтами, как Facebook и Twitch.tv .

Необходимо обернуть возможности jQuery в возможность, которая загружается после того, как документ готов. Это предотвращает замедление:

$(document).ready(function() {// здесь код возможностей});

Чтобы создать эффект растворения, мы используем способ jQuery fadeToggle . Он может значительно проще анимировать элементы.

Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click :

$(document).ready(function() {    $("#loginLink").click(function(event){        // здесь код      });});

Приведенный выше код запускает возможность encased при нажатии элемента с идентификатором loginLink . Чтобы указать ей, что делать, когда элемент нажат, необходимо сделать следующее:

$(document).ready(function() {    $("#loginLink").click(function(event){        event.preventDefault();        $(".overlay").fadeToggle("fast");    });});

Использование jQuery-функции preventDefault() может остановить связь с перенаправлением посетителя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:

<a href="login.php" id="loginLink">Login</a>

При помощи данной простой возможности мы продублируем функционал для закрытия окна.

$(document).ready(function() {    $(".close").click(function(){        $(".overlay").fadeToggle("fast");    });});

Нам не необходимо использовать здесь возможность preventDefault() , так как кнопкой закрытия окна не предоставляется внешняя ссылка.

В JS popup окне сделаем так, чтобы посетитель мог нажать клавишу ESC для закрытия окна:

$(document).ready(function() {    $(document).keyup(function(e) {        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) {             event.preventDefault();            $(".overlay").fadeToggle("fast");        }    });});

Важно отметить, что эта функцию используется в теле if . Оператор проверяет, нажал ли посетитель клавишу ESC (код клавиши 27).

Так как мы не хотим, чтобы посетитель открывал окно при помощи клавиши ESC , необходимо проверить, выводится ли окно наложения или нет.

Вот все весь программный код jQuery :

$(document).ready(function() {    $("#loginLink").click(function( event ){        event.preventDefault();        $(".overlay").fadeToggle("fast");      });    $(".close").click(function(){        $(".overlay").fadeToggle("fast");    });    $(document).keyup(function(e) {        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) {             event.preventDefault();            $(".overlay").fadeToggle("fast");        }    });});

AJAX и HTML 5

Что, если вы захотите сделать эту форму ещё лучше? Можно легко включить в нее форму регистрации. Вот как это можно без проблем сделать без дублирования кода при помощи запроса JQuery AJAX GET :

$(".overlayLink").click(function(event){    event.preventDefault();    var action = $(this).attr('data-action');    $("#loginTarget").load("ajax/" + action);    $(".overlay").fadeToggle("fast");});

Я создал новый класс для формы входа и ссылки для регистрации под названием «overlayLink». После того, как посетитель нажимает на этот элемент, запускается функцию.

Мы хотим, чтобы ссылки не делали ничего иного. Используем для этого preventDefault() . Далее необходимо узнать, какую страницу необходимо извлечь. Это указано в HTML-атрибуте data-action .

Сейчас получаем код указанной страницы / формы или HTML popup окна. Страница, соответствующая нажатой ссылке, должна находиться в паке ajax/ . Далее результат помещается в элемент с классом login-content .

Программный код страницы ajax/login-form.html будет выглядеть следующим образом:

<a class="close">x</a><h3>Sign in</h3><form method="post" action="login.php">    <label for="username">        Username:        <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{8,20}$" required />    </label>    <label for="password">        Password:        <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required />    </label>    <button type="submit">Sign in</button></form>

Ссылки для вызова запроса AJAX будут выглядеть так:

<ul>    <li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>    <li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li></ul>

Далее можно создать файл ajax/registration-form.html :

<a class="close">x</a><h3>Register</h3><form method="post" action="login.php">    <label for="username">        Username:        <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{8,20}$" required />    </label>    <label for="password">        Password:        <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required />    </label>    <label for="email">        Email:        <input type="email" name="email" id="email" placeholder="Your Email Address" required />    </label>    <label for="cpassword">        Confirm Password:        <input type="password" name="cpassword" id="cpassword" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required />    </label>    <button type="submit">Register</button></form>

Каждая ссылка имеет в себя атрибут data-action , он ссылается на файл в папке ajax/ и загружает его в элемент наложения. Чтобы добавить иные файлы, необходимо создать их в папке ajax/ — ajax/yourfile.html и задать data-action=»yourfile.html» .

Заключение и полный код

Спасибо за внимание. Сегодня мы узнали, как сделать popup окно. Надеюсь, это руководство оказалось полезным. Вот полный код:

<!doctype html><html><head><meta charset="UTF-8"><title>HTML 5, CSS 3, jQuery Log-in & Registration</title><link href='http://fonts.googleapis.com/css?family=Varela+Round|Open+Sans:400,300,600' rel='stylesheet' type='text/css'><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(document).ready(function() {    $("#loginLink").click(function( event ){           event.preventDefault();           $(".overlay").fadeToggle("fast");     });    $(".overlayLink").click(function(event){        event.preventDefault();        var action = $(this).attr('data-action');        $("#loginTarget").load("ajax/" + action);        $(".overlay").fadeToggle("fast");    });    $(".close").click(function(){        $(".overlay").fadeToggle("fast");    });    $(document).keyup(function(e) {        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) {             event.preventDefault();            $(".overlay").fadeToggle("fast");        }    });});</script><style>/**    RESET*/*{    box-sizing: border-box;    margin: 0;    outline: none;    padding: 0;}*:after,*:before {    box-sizing: border-box;}/**    Общие стили*/html {    font-size: 16px;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    text-rendering: optimizeLegibility;}body {    background-color: #f3f3f3;    color: rgb(165,165,165);    font-family: "Open Sans", Arial, Helvetica, sans-serif;    font-weight: 400;}a.close {    background-color: rgb(204,204,204);    border-radius: 50%;    color: rgb(255,255,255);    display: block;    font-family: 'Varela Round', sans-serif;    font-size: .8em;    padding: .2em .5em;    position: absolute;    top: 1.25rem;    transition: all 400ms ease;    right: 1.25rem;}    a.close:hover {        background-color: #1bc5b3;        cursor: pointer;    }/**    Панель входа*/div.overlay {    background-color: rgba(0,0,0,.25);    bottom: 0;    display: flex;    justify-content: center;    left: 0;    position: fixed;    top: 0;    width: 100%;}    div.overlay > div.login-wrapper {        align-self: center;        background-color: rgba(0,0,0,.25);        border-radius: 2px;        padding: 6px;        width: 450px;    }        div.overlay > div.login-wrapper > div.login-content {            background-color: rgb(255,255,255);            border-radius: 2px;            padding: 24px;                position: relative;        }            div.overlay > div.login-wrapper > div.login-content > h3 {                color: rgb(0,0,0);                font-family: 'Varela Round', sans-serif;                font-size: 1.8em;                margin: 0 0 1.25em;                padding: 0;            }/**    Форма*/form label {    color: rgb(0,0,0);    display: block;    font-family: 'Varela Round', sans-serif;    font-size: 1.25em;    margin: .75em 0;    }    form input[type="text"],    form input[type="email"],    form input[type="number"],    form input[type="search"],    form input[type="password"],    form textarea {        background-color: rgb(255,255,255);        border: 1px solid rgb( 186, 186, 186 );        border-radius: 1px;        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);        display: block;        font-size: .65em;        margin: 6px 0 12px 0;        padding: .8em .55em;            text-shadow: 0 1px 1px rgba(255, 255, 255, 1);        transition: all 400ms ease;        width: 90%;    }    form input[type="text"]:focus,    form input[type="email"]:focus,    form input[type="number"]:focus,    form input[type="search"]:focus,    form input[type="password"]:focus,    form textarea:focus,    form select:focus {         border-color: #4195fc;        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;    }        form input[type="text"]:invalid:focus,        form input[type="email"]:invalid:focus,        form input[type="number"]:invalid:focus,        form input[type="search"]:invalid:focus,        form input[type="password"]:invalid:focus,        form textarea:invalid:focus,        form select:invalid:focus {             border-color: rgb(248,66,66);            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);        }form button {    background-color: #50c1e9;    border: 1px solid rgba(0,0,0,.1);    color: rgb(255,255,255);    font-family: 'Varela Round', sans-serif;    font-size: .85em;    padding: .55em .9em;    transition: all 400ms ease;    }    form button:hover {        background-color: #1bc5b3;        cursor: pointer;    }</style></head><body><div class="test"></div><p>Here's some content.</p><a href="login.php" id="loginLink">Login</a><ul>    <li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>    <li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li></ul><div class="overlay" style="display: none;">    <div class="login-wrapper">        <div class="login-content" id="loginTarget">            <a class="close">x</a>            <h3>Sign in</h3>            <form method="post" action="login.php">                <label for="username">                    Username:                    <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{8,20}$" required />                </label>                <label for="password">                    Password:                    <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required />                </label>                <button type="submit">Sign in</button>            </form>        </div>    </div></div></body></html>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *