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

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

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

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

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

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

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

use yii\bootstrap\Modal;

Modal::begin([
    'header' => '<h2>Hello world</h2>',
    'toggleButton' => ['label' => 'click me'],
    'footer' => 'Низ окна',
]);

echo 'Say hello...';

Modal::end();

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

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

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

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

Modal::begin([
    'header' => '<h2>Hello world</h2>',
    'toggleButton' => [
        'label' => 'click me',
        'tag' => 'button',
        'class' => 'btn btn-success',
    ],
    'footer' => 'Низ окна',
]);

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

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

<?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: Модальное окно

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree