Создаем простое модальное окно с помощью JQuery | jQuery

Подключение JQuery и Facebox.

Прежде всего, нам потребуется подключить к используемому шаблону Joomla JQuery и Facebox.

JQuery в вашем шаблоне может быть уже подключен. Если вы используете Joomla 3, то скорее всего подключен. Как узнать наверняка? Откройте главную страницу сайта, кликните по ней правой кнопкой мыши и выберите код «Просмотр исходного кода»(в разных браузерах этот пункт называется по-разному, но смысл такой же).

Создание позиции для модуля.

Теперь, когда скрипт подключен, нам нужно создать специальную скрытую позицию для модуля авторизации. Для этого открываем файл templates/ваш_шаблон/index.php, находим в нем закрывающий тег </body> и перед ним добавляем:

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

Создание модуля.

После того, как позиция создана, нужно создать сам модуль. Для этого идем в менеджер модулей, добавляем новый модуль типа Авторизация(login), либо, если он уже создан, редактируем его, изменяя позицию на login. В списке позиций таковой не будет. Нужно просто записать ее вручную. Модуль нужно опубликовать.

Css стили

Начнем с обертки form_wrapper. Мы задаем белый фон, который будет виден при переключении между формами:

Заголовок каждой формы будет иметь следующие стили:

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

В нашей функции JavaScript мы будем анимировать обертку каждой формы, поэтому определим её размеры:

Колонки в регистрационной форме будут расположены рядом друг с другом:

Все ссылки из нашей формы имеют следующие стили:

Элемент label имеют встроенные стили по умолчанию. Но мы хотим чтобы они отображались как блочный элемент:

Добавим формам ввода некоторые классные свойства из CSS3. В качестве фона градиент, и небольшую тень:

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

Похожее:  7 способов зайти на заблокированные сайты с ПК, смартфона и планшета | Компьютерра

Ссылки имеют такие стили:

Стили для чекбокса “Запомнить меня”:

Кнопки отправки данных, будут иметь небольшую тень, в общем ничего особенного:

Html каркас

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

Теперь мы будем добавлять каждый элемент формы в обертку и вставлять в неё необходимые поля ввода. Каждая форма будет иметь заголовок. Регистрационная форма, её мы сделаем первой, будет расположена в две колонки:

Теперь мы создадим форму входа. Эта форма будет отображаться, когда пользователь заходит на сайт. Поэтому мы дадим ей еще один специальный класс active:

И, наконец, мы добавим форму восстановления пароля:

Все ссылки на другую форму будут иметь класс linkform и для того, чтобы по запросу пользователя в нужный момент вывести другую форму, мы добавляем ссылкам атрибут rel. Например, ссылка “Нет аккаунта? Регистрация”, будет иметь значение атрибута rel “register”, так как мы хотим выводить форму регистрации при нажатии на ссылку.

Как Вы мозможно уже заметили, атрибут ссылки href будет указывать на статические HTML страницы с соответствующей формой. Ссылки из предыдущего примера будет указывать на index.html, который содержит нашу форму входа. Эта ссылка будет входить в обиход, когда JavaScript отключен.

Ладно, теперь давайте, добавим стили CSS для этих форм.

Javascript

Реализуем идею, анимации при переключении форм. Итак, сначала мы будем кэшировать некоторые элементы:

Мы получаем ширину и высоту каждой формы. Чтобы сохранить её при последующем открытии, сделаем следующее:

Теперь мы вызываем функцию, которая устанавливает размер обертки текущей активной формы:

Похожее:  Client Portal - плагин WordPress для создания личной страницы пользователя

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

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

Для демонстрационном варианту мы отключили обработку форм. Если вы их используете, то вам нужно определить, какие формы будут работать и добавить класс active в форму:

Вот форма и готова! Теперь мы узнали, как сделать удобную jquery авторизацию и форму регистрации.Надеемся для вас был полезен и интересен данный урок.

Данный урок подготовлен для вас командой сайта vhod-v-lichnyj-kabinet.ruИсточник урока: Перевел: Владислав Бондаренко

Вызов модального окна jquery по ссылке с css

Следующим шагом будет создание

модального окна

при нажатии по ссылке. Фон при этом будет медленно затемняться.


Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть. Этот код размещаем в body Вашего документа.

Код js

И, наконец, напишем скрипт, который и реализует всю логику:

Подключаем необходимые файлы

Если на вашем сайте не подключен jQuery, то подключим его. Используем CDN Яндекса. Вставляем этот код внутри тега <head></head>:

Создаём простое всплывающее модальное окно


Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться

jQuery код

Код вставляете в любое место в

body

Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:


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

Создаем простое модальное окно с помощью jquery

В этой статье мы рассмотрим, как создать простое всплывающее окно HTML:

Демо-версия

Для начала создадим базовую HTML-разметку модального окна и открывающейся ссылки:

В приведенном выше коде мы создали ссылку. Затем мы создали само всплывающее окно при нажатии на ссылку HTML.

Обратите внимание, что цель тега <a> должна строго соответствовать ID модального окна. В нашем случае ссылка указывает на #modal, и идентификатор модального окна также modal.

Похожее:  Личный кабинет МТС банка — пошаговая инструкция по регистрации и входу, преимущества, отзывы

В следующем шаге нам нужно добавить стили модального окна:

Перед тем, как сделать всплывающее окно в HTML, осталось добавить JQuery, чтобы оно выводилось при клике по ссылке и размещалось в середине экрана:

Сначала мы выбираем все теги <a> с name= “modal“, затем извлекаем из них ссылку href. После этого получаем ширину и высоту экрана, чтобы разместить всплывающее окно по середине.

Не забудьте подключить библиотеку JQuery, иначе создать всплывающее окно HTML не получится:

Все готово, и наше простое JQuery модальное окно должно работать нормально.

Если вы не хотите, чтобы всплывающее окно выводилось каждый раз при загрузке страницы, тогда используйте cookies. Для этого создадим новый файл с именем popup.js. Он будет содержать весь код JS и JQuery. Сначала добавим в него функции createCookie(), readCookie() и eraseCookie():

После этого нужно изменить наш код JQuery для HTML всплывающего окна с текстом и поместить его в функцию с именем myPopup():

Как видите, мы удалили функцию .click(), так как всплывающее окно не будет управляться внешней функцией. Мы также удалили e.preventDefault(). Следовательно, мы не будем использовать ссылку для вывода модального окна.

После того, как мы добавили эти четыре функции в файл popup.js, нужно добавить последнюю часть кода JQuery, которая будет закрывать всплывающее окно HTML.

Все готово. Давайте поэкспериментируем с функциями и сделаем так, чтобы модальное окно показывалось только каждые 7 дней. Для этого создаем переменную с именем popup, которая считывает cookies с именем popup:

Затем создаем конструкцию if else, чтобы проверить, существуют ли cookies. Если да, то ничего не делаем. Иначе входим в цикл, создаем cookies на 7 дней и выводим всплывающее окно при нажатии на ссылку HTML:

Вот и все! Мы реализовали простую систему cookie. Теперь можно удалить следующую часть из HTML-кода, если мы используем куки:

Если у вас возникли какие-либо вопросы, оставьте их в комментариях!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, подписки, отклики, дизлайки, лайки огромное вам спасибо!

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

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

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

Adblock
detector