Устанавливаем 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 шаблона не составит труда.
Комментарии
Интересно, почему это не реализовано из коробки?
ОтветитьВозьму на вооружение B-)
ОтветитьОпределенно полезная статья, +1
ОтветитьА можно то же самое, но для alert'a сделать?
ОтветитьВозможно, еще не пробовал
ОтветитьЗамечательно, из всего нета по этой теме единственная толковая статья
Ответить