Yii2. Стилізація стандартного діалогу confirm під стиль twitter bootstrap

12 вересня 2024 р. 154 egor

За замовчуванням в yii2, всі confirm діалоги використовують стандартний javascript alert(). Але вигляд системного confirm не вписується в концепцію стилів заснованих на Twitter Bootstrap.

Усунемо цю проблему за допомогою бібліотеки Bootbox, яка містить як стандартні методи alert, prompt та confirm, так і метод dialog, що створює модальне діалогове вікно в стилі Twitter Bootstrap.

Встановлюємо bootBox.js (bootboxjs.com) за допомогою composer, для цього відкриваємо консоль, переходимо в папку з проєктом і запускаємо таку команду:

composer require --prefer-dist bower-asset/bootbox "*"

Далі створюємо файл з ім'ям BootboxAsset.php поруч з AppAsset.php у папці assets вашого проєкту, для підключення необхідних скриптів, з таким змістом:

<?php

namespace app\assets;

class BootboxAsset extends \yii\web\AssetBundle
{

    public $sourcePath = '@bower/bootbox';

    public $css = [
    ];

    public $js = [
        'bootbox.js'
    ];

}

Після чого, нам необхідно перевизначити стандартний yii.confirm. Для цього створіть папку js (якщо її ще немає) у вашому проекті @app/web/js, а в ній js файл yii.confirm.overrides.js з таким вмістом:

yii.confirm = function(message, ok, cancel) {
    bootbox.confirm(message, function(result) {
        if (result) { !ok || ok(); } else { !cancel || cancel(); }
    });
}

Далі додамо js файл у Yii2-asset-bundle. Для цього відкрийте @app/assets/AppAsset.php, додайте до нього js файл yii.confirm.overrides.js та залежність BootboxAsset для підключення необхідних скриптів до сайту. Файл @app/assets/AppAsset.php матиме такий вигляд:

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{

    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $css = [
        'css/site.css',
    ];

    public $js = [
        //js перевизначає yii.confirm
        'js/yii.confirm.overrides.js',
    ];

    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        //імпорт файлів BootboxAsset
        'app\assets\BootboxAsset',
    ];
}

На цьому все. Давайте перевіримо, відкриємо будь-який список управління записами і натиснемо видалити для виклику діалогу підтвердження. До внесення змін було так:

Після того як ми підключили BootboxAsset:

Приклад виклику confirm діалогу для кнопки:

<?php

use yii\helpers\Html;

//...

echo Html::submitButton(
    'Кнопка',
    [
        'class' => 'btn',
        'data-confirm' => Yii::t('yii', 'Ви точно хочете це зробити?'),
    ]
);

Приклад наведено для yii2 basic, але впровадити його для advanced шаблону не складе труднощів.