Yii2 使用 bootboxJS美化confirm窗口

有些關鍵操做好比刪除，咱們在執行前通常先彈出來個confirm確認窗口。

在Yii2中爲一個操做添加confirm確認很容易。只需在連接出添加一個‘data-confirm' => '確實要添加？'屬性。

Html::a('<i class="fa fa-plus"></i> 添加', ['create'],
    [
        'class' => 'btn btn-success btn-sm',
        'data-confirm' => '確實要添加？'
    ]);

玄機隱藏在yii.js

美中不足的是，yii使用的是原生的confirm，有點醜。若是能使用bootboxJS提供的bootstrap樣式的彈窗會更好看些。

實現起來也很容易，bootbox自己就一個js文件，只需引入進來，而後覆蓋yii提供的conform方法便可。

先下載最新的bootbox.min.js文件，我是放到了\backend\web\js

新建一個BootboxjsAsset.php文件

<?php
/**
 * Created by PhpStorm.
 * User: mafeifan
 * Date: 2016/06/04
 * Time: 20:23
 */

namespace backend\assets;

use yii;
use yii\web\AssetBundle;

class BootboxjsAsset extends AssetBundle
{

    public $sourcePath = '@backend/web/';
    public $js = [
        'js/bootbox.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'backend\assets\BootstrapAsset',
    ];

    public static function overrideSystemConfirm()
    {
        Yii::$app->view->registerJs('
            yii.confirm = function(message, ok, cancel) {
                bootbox.confirm(message, function(result) {
                    if (result) { !ok || ok(); } else { !cancel || cancel(); }
                });
            }
        ');
    }
}

注意命名空間和bootbox.min.js的位置。

由於我想在後臺全局覆蓋confirm彈窗。

打開backend\views\layouts\main.php。添加以下代碼。

use backend\assets\AppAsset;
use backend\assets\BootboxjsAsset;
AppAsset::register($this);
BootboxjsAsset::register($this);
BootboxjsAsset::overrideSystemConfirm();

大功告成，快試試效果吧。

PS : 覆蓋的js代碼是寫在php文件中，也可寫在js文件中。

參考：http://qiita.com/tanakahisateru/items/be28b7bed4566ce8fa99