Создание модального окна
Как известно, по-умолчанию к Yii2 подключаются стилевые файлы css-фреймворка Bootstrap. Это значит, что мы можем использовать все доступные в нем элементы интерфейса: выпадающие списки, слайдеры и прочее.
Часто бывает необходимо создать простое всплывающее (модальное) окно (окно, которое появляется в центре экрана и содержит в себе какую-либо информацию, при этом вся остальная часть рабочей области затемняется и становится недоступной) с какими-то данными.
Boostrap позволяет очень просто сделать это с помощью следующего кода:
Чтобы модальное окно действительно работало, сначала нужно создать кнопку, которая будет инициализировать модальное окно (кликаем по кнопке, получаем окно):
Это может быть как кнопка button , так и ссылка a , главное, чтобы элемент содержал data-атрибуты data-toggle и data-target . Первый равен значению modal , второй названию атрибута id , для связи с блоком всплывающей формы. Да, именно с решеткой # .
Сам элемент модального окна должен содержать атрибут id со значением, которое было указано в кнопке вызова окна:
Внутри блока находятся три важных элемента, которые нужно заполнять для создания интерфейса модального окна.
1) Шапка окна:
Здесь в базовом примере от Bootstrap находится заголовок формы и кнопка закрытия всей формы.
2) Контентная область окна:
Здесь также может быть любое html-содержимое: форма, таблица, текст, список и другие.
3) Подвал окна:
Здесь обычно располагаются элементы управления формой: кнопка выполнения действия окна (например, отправка формы, если она там есть) и еще одна кнопка закрытия формы.
После окончательной разметки можно получить примерно такую форму:
Как всегда, виджеты Yii2 позволяют нам сэкономить много строк кода.
Для начала подключим одноименный виджет, который идет в дистрибутиве фреймворка:
После этого разместим php-код в нужном месте страницы:
Начало блока модального окна инициализируется с помощью конструкции:
Вся разметка, которая находится между этими вызовами будет находится в контентой области модального окна, т.е. внутри блока:
Для корректной работы модального окна в инициализации формы нужно заполнить параметры:
id — атрибут для связи с кнопкой вызова формы ( data-target="#myModal" ).
header — содержимое, которое будет выводиться в шапке модального окна:
footer — содержимое, которое будет выводиться в подвале модального окна:
Параметры header и footer должны содержать разметку, которая будет выводиться в соответствующих областях модального окна.
Это единственный неудобный момент использования виджета, но скорее всего больших блоков разметки здесь не будет и все значения можно поместить в соответствующие переменные:
Которые нужно указать при инициализации формы.
Виджет поддерживает и другие полезные параметры для создания модального окна. Исходный код виджета хорошо документирован, разобраться во всех его настройках не составит труда.
Виджет хорошо подойдет в ситуации, когда нужно быстро создать простое модальное окно. Однако, если надо создать какое-то специфично стилизованное окно, виджет не сможет в полной мере реализовать эту задачу. Придется вставлять на страницу полный вариант разметки и вызывать окно с помощью JS/jQuery.
Некогда мы выводили модальное окно с формой обратной связи на CJuiDialog для Yii 1. Делаем то же теперь в Yii 2. Но теперь используем Bootstrap 3 modal, в целом же вести всплывающую форму отправляющую письмо по ajax, в случае с Yii 2 проще. Это достаточно насущная задача, так как крайне часто требуется на сайте воткнуть кнопку "Оставить онлайн заявку" или "Перезвоните мне".
В работе форму можно посмотреть на сайте нашей школы брейк данса «Inspire».
1) Ставим кнопку, вызывающую модальное окно с формой и само окно (обычно в шаблоне главной страницы)
2) Тут же в шаблоне главной, где подключили кнопку (на весь сайт это не нужно распространять), подключаем скрипт:
3) Его создадим в папке web/scripts.
Здесь 2 события. Первое выполняется по нажатию кнопки с классом .signup и обращается к URL = "signup", который пропишем дальше в rules у urlManager. Сразу пропишем и для второго события.
Вторая функция обрабатывает отправку формы. И если получен ответ true, то выводит сообщение об успешной отправке письма и закрывает модальное окно через 4 секунды (если посетитель сам не закрыл его раньше). Если будет получен не true, а что-то другое, то это покажется в модальном окне, тут делается скрытие и обновление его .hide().fadeIn().
4) Едем дальше. В контроллере SiteController методы signup и submitsignup
Как раз первый заполняет в модельное окно форму через renderPartial. Второй метод submitsignup похож на contact — он таким же образом эту форму отправляет на email.
5) Создадим модель SignupForm.php (очень похожую на ContactForm)
6) И само представление формы
N.B. Обратите внимание, что письма по-умолчанию отправляются swiftmailer через функцию mail(). Посмотрите в настройках конфига, чтобы на рабочем проекте на сервере был выключен параметр useFileTransport . Это задаётся в настройках компонента mailer (либо закомментруйте строку, либо явно укажите ‘useFileTransport’ => false, )
Если этого не сделать, то все письма будут складываться и скапливаться в runtime/mail, а не отправляться адресату:
Вот и всё. У вас должно получиться модальное окно, появляющееся по нажатию на кнопку. В окне форма, у которой работает ajax валидация и нажав "Отправить" эти данные отправляются администратору без перезагрузки страницы!
P.S. Если кому-то будет интересно, вот как без фреймворков сразу на скриптах — Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (пригодится, если будете клепать лендинг-страницы без движков).
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Имеется модальная форма авторизации на HTML:
в нее необходимо встроить формы авторизации с Yii2. Пытался заменить строки
на
В следствии этого появляется ошибка
Call to a member function field() on null