Yii2: Модальное окно

Yii2: Модальное окно

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

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

Yii2: Модальное окно

Давайте скроем эту форму под кнопкой или ссылкой, клик по которой покажет модальное окно с формой обратной связи.

Откроем представление site\contact.php и напишем минимальный код виджета Modal класса yii\bootstrap\Modal.

Yii2: Модальное окно

В результате на странице появится кнопка Click me, кликнув по которой откроет модальное окно с тестовым содержимым.

Yii2: Модальное окно

В методе begin виджета модального окна мы можем настроить его функционал по своему вкусу. Например, добавим класс кнопке и укажем, что за кнопку будет отвечать тэг button:

Yii2: Модальное окно

Ну и, наконец, давайте поместим форму обратной связи в модальное окно. Для этого просто перенесем весь код формы между методами begin и end виджета.

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

Yii2: Модальное окно

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

Метки:

Похожие статьи:

Комментарии Вконтакте: