Yii2: Модальний

26

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

Отже, для знайомства з віджетом давайте скористаємося вже готової формою зворотнього зв’язку. На сучасних сайтах часто форма зворотного зв’язку доступна на будь-якій сторінці сайту і показується саме в модальному вікні. Нагадаю, форма за промовчанням в Yii знаходиться на сторінці контактів і показується відразу.

Yii2: Модальний

Давайте будемо приховувати цю форму під кнопкою або посиланням, клік по якій покаже модальне вікно з формою зворотнього зв’язку.

Відкриємо подання site\contact.php і напишемо мінімальний код віджету Modal класу yii\bootstrap\Modal.

use yii\bootstrap\Modal;
Modal::begin([
‘header’ => ‘

Hello world

‘,
‘toggleButton’ => [‘label’ => ‘click me’],
‘footer’ => ‘Низ вікна’,
]);
echo ‘Say hello…’;
Modal::end();

Yii2: Модальний

В результаті на сторінці з’явиться кнопка Click me, натиснувши на яку відкриє модальне вікно з тестовим вмістом.

Yii2: Модальний

У методі begin віджета модального вікна ми можемо налаштувати його функціонал по своєму смаку. Наприклад, додамо клас кнопці і зазначимо, що через кнопку буде відповідати тег button:

Modal::begin([
‘header’ => ‘

Hello world

‘,
‘toggleButton’ => [
‘label’ => ‘click me’,
‘tag’ => ‘button’,
‘class’ => ‘btn btn-success’,
],
‘footer’ => ‘Низ вікна’,
]);

Yii2: Модальний

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

Hello world

‘,
‘toggleButton’ => [
‘label’ => ‘click me’,
‘tag’ => ‘button’,
‘class’ => ‘btn btn-success’,
],
‘footer’ => ‘Низ вікна’,
]);
?>
‘contact-form’]); ?>
field($model, ‘name’)->textInput([‘autofocus’ => true]) ?>
field($model, ’email’) ?>
field($model, ‘subject’) ?>
field($model, ‘body’)->textarea([‘rows’ => 6]) ?>
field($model, ‘verifyCode’)->widget(Captcha::className(), [
‘template’ => ‘

{image}
{input}

‘,
]) ?>

‘btn btn-primary’, ‘name’ => ‘contact-button’]) ?>

У результаті форма зворотного зв’язку буде спочатку прихована і буде показана в модальному вікні.

Yii2: Модальний

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