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

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

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

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

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

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

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

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

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

Css стили

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

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

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

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

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

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

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

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

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

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

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

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

Html каркас

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

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

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

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

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

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

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

Javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код js

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

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

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

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

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

jQuery код

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

body

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

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

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