От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В данной статье мы будем работать с виджетом модального окна. Yii2 модальное окно Bootstrap позволяет быстро и в симпатичной форме организовать необходимый нам функционал.
Итак, для знакомства с виджетом давайте воспользуемся уже готовой формой обратной связи. На современных сайтах часто форма обратной связи доступна на любой странице сайта и показывается именно в модальном окне. Напомню, форма по умолчанию в Yii находится на странице контактов и показывается сразу.
Давайте скроем эту форму под кнопкой или ссылкой, клик по которой покажет модальное окно с формой обратной связи.
Откроем представление site\contact.php и напишем минимальный код виджета Modal класса yii\bootstrap\Modal.
|
1 2 3 4 5 6 7 8 9 10 11 |
use yii\bootstrap\Modal; Modal::begin([ 'header' => '<h2>Hello world</h2>', 'toggleButton' => ['label' => 'click me'], 'footer' => 'Низ окна', ]); echo 'Say hello...'; Modal::end(); |
В результате на странице появится кнопка Click me, кликнув по которой откроет модальное окно с тестовым содержимым.
В методе begin виджета модального окна мы можем настроить его функционал по своему вкусу. Например, добавим класс кнопке и укажем, что за кнопку будет отвечать тэг button:
|
1 2 3 4 5 6 7 8 9 |
Modal::begin([ 'header' => '<h2>Hello world</h2>', 'toggleButton' => [ 'label' => 'click me', 'tag' => 'button', 'class' => 'btn btn-success', ], 'footer' => 'Низ окна', ]); |
Ну и, наконец, давайте поместим форму обратной связи в модальное окно. Для этого просто перенесем весь код формы между методами begin и end виджета.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php Modal::begin([ 'header' => '<h2>Hello world</h2>', 'toggleButton' => [ 'label' => 'click me', 'tag' => 'button', 'class' => 'btn btn-success', ], 'footer' => 'Низ окна', ]); ?> <?php $form = ActiveForm::begin(['id' => 'contact-form']); ?> <?= $form->field($model, 'name')->textInput(['autofocus' => true]) ?> <?= $form->field($model, 'email') ?> <?= $form->field($model, 'subject') ?> <?= $form->field($model, 'body')->textarea(['rows' => 6]) ?> <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>', ]) ?> <div class="form-group"> <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?> </div> <?php ActiveForm::end(); ?> <?php Modal::end(); ?> |
В результате форма обратной связи будет изначально скрыта и будет показана в модальном окне.
Как видим, все достаточно просто. Мы же пока что остановимся на этом. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
