Спочатку потрібно скинути CSS браузера і імпортувати додаткові шрифти. Я збираюся використовувати Open Sans і Varela Round. які доступні в Google Font.
Імпорт шрифтів Google:
Скидання CSS і стилів сайту за замовчуванням:
Стилі розділів body і HTML можна змінити на свій розсуд, це мало вплине на створювану форму входу і popup вікно jQuery.
Потім потрібно підключити на сторінці jQuery. Я використовую посилання на jQuery. але можна використовувати локальну версію.
Створення CSS-накладення
Перш за все, необхідно створити елемент накладення і контейнер для форми входу.
Накладення додає чорний відтінок до іншої частини контенту сторінки, тим самим виділяючи необхідний блок. Це простий CSS-ефект. використовує позиціонування і колір фону.
Оскільки його стилі поділяються на дві основні частини, я збираюся пояснити їх окремо.
Спочатку розглянемо установку позиції і додавання кольору:
Розберемо цей код:
- background-color: rgba (0,0,0, .25) - використання RGBA дозволяє вказати колір і альфа-значення, альфа - це непрозорість кольору;
- bottom: 0 - позиціонує елемент внизу сторінки;
- left: 0 - позиціонує елемент по лівому краю сторінки;
- position: fixed - при прокручуванні сторінки позиція елемента не змінюється;
- top: 0 - позиціонує елемент у верхній частині сторінки;
- width: 100% - елемент заповнює всю ширину сторінки.
Друга частина включає flexbox CSS3. що значно спрощує позиціонування елементів всередині контейнера. Давайте подивимося:
Примітка. на момент написання цієї статті flexbox в повному обсязі підтримувався у всіх основних браузерах. Якщо хочете охопити максимальну кількість браузерів, необхідно використовувати префікси:
Стилі панелі входу на HTML і CSS
Тепер у нас є контейнер, і потрібно розмістити в ньому створювану форму входу. Спільною рисою подібних форм з popup вікном jQuery є напівпрозора межа. Ми використовуємо елемент контейнера для досягнення цього ефекту, але можна використовувати кордон, щоб отримати те ж саме:
Більшість CSS-властивостей очевидні. За допомогою значення rgba ми ще раз встановили колір фону, що дає гарний непрозорий ефект. border-radius задає закруглені кути контейнера форми входу.
Властивість, яке вимагає пояснень, це align-self. оскільки воно досить нове. Це пов'язано з flexbox. align-self визначає горизонтальне вирівнювання елемента, і ми задали вирівнювання точно по центру.
Далі переходимо до області вмісту. До сих пір ми мали справу тільки з напівпрозорими фонами, так що прийшов час використовувати щось суцільне:
Ми використовуємо суцільний білий фон, тому замість rgba застосували тільки rgb. Відступ в 24 пікселя можете змінити на свій розсуд.
Важливою частиною цього правила є визначення position. Це необхідно при використанні абсолютно позиціонуються елементів всередині контейнера - це буде кнопка закриття.
Тепер потрібно оформити всередині панелі входу заголовок (h3):
Щоб виділити заголовок, я використовую чорний округлий шрифт з розміром 1.8 em. Використання 1.8 em задає розмір шрифту щодо шрифту документа. Це називається еластичністю шрифту.
Створення кнопки закриття
Перед тим, як зробити popup вікно, потрібно створити кнопку закриття форми входу. Це робиться в такий спосіб:
Ось пояснення коду:
- background-color - ми використовуємо приємний світло-сірий фон;
- border-radius - оскільки ми створюємо коло, нам потрібно, щоб радіус заокруглення кутів кордону становив 50% від висоти;
- position: absolute - абсолютне позиціонування кнопки / посилання, але так як для контейнера встановлено відносне позиціонування, позиції всіх елементів встановлюються щодо нього;
- top - відстань від верхньої частини форми входу - rem - відносна залежність, яка пов'язана з розмірами шрифту;
- transition - задає анімацію для всіх властивостей, використовуються значення 400ms ease;
- right - відстань від правого краю екрана до форми входу.
У другому блоці використовується селектор: hover. вказує браузеру, що робити, коли користувач наводить на елемент курсор миші. В цьому випадку кнопка стає зеленого кольору, а покажчик миші змінює свій вигляд.
Створення форми входу
Скоро перейдемо до HTML popup вікна. А поки CSS-код форми входу:
Спочатку ми визначили стилі для міток форми. Завдяки цьому користувач може натиснути текст і перейти до відповідного полю форми. Елемент label працює безпосередньо з id даних.
Перед тим, як зробити popup вікно HTML. ми створюємо елементи введення даних форми. Я вказав inset box-shadow. щоб задати для них гарну внутрішню тінь.
Використання селектора: focus дозволяє вказати, як буде виглядати елемент введення даних, коли користувач встановив в ньому курсор. Необхідно наочно показати, що елемент в даний момент обраний.
В кінці ми задаємо стилі за допомогою селектора CSS: invalid. Коли користувач вводить дані, які не відповідають заданим шаблоном, елемент введення буде відображатися за допомогою цих стилів.
Стилі кнопки входу
Стилі кнопки не містять нічого нового:
Для кнопки ми задали приємний синій фон з напівпрозорої темної рамкою. Цей прийом дозволяє не змінювати колір кордону, коли ми змінюємо колір фону. Ми також встановили для кнопки стандартну CSS-анімацію переходу при зміні кольору фону.
Як і для кнопки закриття вікна, ми поставимо зміна кольору фону при наведенні курсору миші, щоб кнопка виглядала клікабельно.
HTML-код форми входу
До сих пір всі пояснення стосувалися стилів CSS. Тепер прийшов час коротко розглянути розмітку. У тому числі і HTML popup вікна.
У формі використовуються елементи HTML 5. тому переконайтеся, що doctype заданий вірно:
Повний HTML-код форми входу:
При використанні цього методу для всього сайту необхідно розмістити код всередині елемента body.
Потрібно обернути функції jQuery в функцію, яка завантажується після того, як документ готовий. Це запобігає уповільнення:
Щоб створити ефект розчинення, ми використовуємо метод jQuery fadeToggle. Він дозволяє значно простіше анімувати елементи.
Ми використовуємо fadeToggle при натисканні посилання входу в систему. Для цього нам буде потрібно подія jQuery click:
Наведений вище код запускає функцію encased при натисканні елемента з ідентифікатором loginLink. Щоб вказати їй, що робити, коли елемент натиснуто, потрібно зробити наступне:
Використання jQuery-функції preventDefault () дозволяє зупинити зв'язок з перенаправленням користувача. Це забезпечує функціонал для розробників, які можуть посилатися на сторінку входу:
За допомогою цієї простої функції ми продублюємо функціонал для закриття вікна.
В JS popup вікні зробимо так, щоб користувач міг натиснути клавішу ESC для закриття вікна:
Важливо відзначити, що ця функція використовується в тілі if. Оператор перевіряє, натиснув користувач клавішу ESC (код клавіші 27).
Оскільки ми не хочемо, щоб користувач відкривав вікно за допомогою клавіші ESC. потрібно перевірити, чи відображається вікно накладення чи ні.
Ось все весь код jQuery:
AJAX і HTML 5
Що, якщо ви захочете зробити цю форму ще краще? Можна включити в неї форму реєстрації. Ось як це можна зробити без дублювання коду за допомогою запиту JQuery AJAX GET:
Я створив новий клас для форми входу і посилання для реєстрації під назвою «overlayLink». Після того, як користувач натискає на цей елемент, запускається функція.
Ми хочемо, щоб посилання не робили нічого іншого. Використовуємо для цього preventDefault (). Потім потрібно дізнатися, яку сторінку потрібно витягти. Це зазначено в HTML-атрибут data-action.
Тепер отримуємо код зазначеної сторінки / форми або HTML popup вікна. Сторінка, відповідна натиснутою посиланням, повинна знаходитися в паку ajax /. Потім результат поміщається в елемент з класом login-content.
Код сторінки ajax / login-form.html буде виглядати наступним чином:
Посилання для виклику запиту AJAX будуть виглядати так:
Потім можна створити файл ajax / registration-form.html:
Висновок і повний код
Дякуємо за увагу. Сьогодні ми дізналися, як зробити popup вікно. Сподіваюся, це керівництво виявилося корисним. Ось повний код:
Переклад статті «Create a Popup HTML Login Box with jQuery» дружною командою проекту Сайтобудування від А до Я.