Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком Yii2. В даній статті ми будемо працювати з віджетом модального вікна. Yii2 модальний Bootstrap дозволяє швидко і в привабливій формі організувати необхідний функціонал.
Отже, для знайомства з віджетом давайте скористаємося вже готової формою зворотнього зв’язку. На сучасних сайтах часто форма зворотного зв’язку доступна на будь-якій сторінці сайту і показується саме в модальному вікні. Нагадаю, форма за промовчанням в Yii знаходиться на сторінці контактів і показується відразу.
Давайте будемо приховувати цю форму під кнопкою або посиланням, клік по якій покаже модальне вікно з формою зворотнього зв’язку.
Відкриємо подання 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();
В результаті на сторінці з’явиться кнопка Click me, натиснувши на яку відкриє модальне вікно з тестовим вмістом.
У методі begin віджета модального вікна ми можемо налаштувати його функціонал по своєму смаку. Наприклад, додамо клас кнопці і зазначимо, що через кнопку буде відповідати тег button:
Modal::begin([
‘header’ => ‘
Hello world
‘,
‘toggleButton’ => [
‘label’ => ‘click me’,
‘tag’ => ‘button’,
‘class’ => ‘btn btn-success’,
],
‘footer’ => ‘Низ вікна’,
]);
Ну і, нарешті, давайте помістимо форму зворотного зв’язку в модальне вікно. Для цього просто перенесемо весь код форми між методами 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’ => ‘
‘,
]) ?>
У результаті форма зворотного зв’язку буде спочатку прихована і буде показана в модальному вікні.
Як бачимо, все досить просто. Ми ж поки що зупинимося на цьому. Більше про фреймворку ви можете дізнатися з наших безкоштовних або платних уроків. Також створення найпростішого блогу на Yii2 можна подивитися в цьому циклі уроків.