BootstrapYii2美化confirm

  到Bootbox官网下载Bootbox.js插件,它是一个微型的JavaScript库用来创造简单的可是编程对话框,基于Bootstrap的Modal(模态框)来创造。然后于@app/web/js/路径下创造一个javascript文件,比如confirm.js,内容如下

yii.allowAction = function ($e) {
    var message = $e.data('confirm');
    return message === undefined || yii.confirm(message, $e);
};
// --- Delete action (bootbox) ---
yii.confirm = function (message, ok, cancel) {

    bootbox.confirm(
        {
            message: message,
            buttons: {
                confirm: {
                    label: "确定",
                    className: 'btn-success'
                },
                cancel: {
                    label: "取消",
                    className: 'btn-danger'
                }
            },
            callback: function (confirmed) {
                if (confirmed) {
                    !ok || ok();
                } else {
                    !cancel || cancel();
                }
            }
        }
    );
    // confirm will always return false on the first call
    // to cancel click handler
    return false;
}

  接下去注册资源包,包括下载的Bootbox.js和点所描写的confirm.js,修改文件:@app/assets/Assets.php,

namespace backend\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];

    // 注册js资源,加入这段代码
    public $js = ['js/bootbox.min.js', 'js/confirm.js'];

    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

  最后刷新之前的页面就好了。修改前后对比

  修改前

  Bootstrap 1

  修改之后

  Bootstrap 2

相关文章