tunect/yii2-modal

Yii2 Bootstrap Modal wrapper

Bootstrap Modal wrapper for Yii2 framework

This module provides modal pop-over window for controller actions., _(*1)

Installation

Run CLI command to install extension:, _(*2)

composer require tunect/yii2-modal

That's it, module will work. Additional settings are optional., _(*3)

Optional settings

To specify custom module name (default name is modal) set it in index.php or in config file (before config goes to Application constructor):, _(*4)

\tunect\Yii2Modal\Module::$moduleName = 'custom-modal';

Module settings can be changed in app config:, _(*5)

'modules' => [
    'modal' => [
        'class' => 'tunect\Yii2Modal\Module',
    ],
],

Usage

To let some page be rendered in modal add widget to layout (e.g. right before $this->endBody()):, _(*6)

<?= \tunect\Yii2Modal\Widget::widget() ?>

Widged should be added only once since it uses an id attribute (hence expected to be unique). Widged just adds basic empty elements to be filled and displayed on demand., _(*7)

And add a link (a tag) or any other element with showModalButton class:, _(*8)

<?= Html::a('Add product', ['/product/create'], ['class' => 'btn btn-primary showModalButton']) ?>

href attribute will be used for a elements to get Ajax request URL, value attribute for all other elements (tags)., _(*9)

E.g. <a href="/some-url" class="showModalButton">Get modal</a> is equal with <button value="/some-url" class="showModalButton">Get modal</button>, some-url response will be used to fill modal in both cases., _(*10)

To handle Ajax requests and render response in modal use JSON format:, _(*11)

if (Yii::$app->request->isAjax) {
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return [
        'status' => 200,
        'message' => $message, // Any html to be displayed in modal (e.g. yii\web\Controller::renderAjax() method output)
        'pjax' => "#products-list", // To reload pjax container with id "products-list" (e.g. grid after element creation in modal)
    ];
}