Yii2使用Bootbox插件自定义弹窗

水深无声 2022-07-15 12:10 232阅读 0赞

本次尝试了一个新的小插件”bootbox”。

Yii2中使用了Bootstarp，让界面更美观，可是美中不足的是，在Gridview表格的Action里，删除功能的弹窗实在有点与Bootstrap违和，网上找到了一种解决方案，分享下使用此插件的过程。

Bootbox.js，是一个小型的JavaScript库用来创建简单的可编程对话框，基于Bootstrap的Modal（模态框）来创建。

官方说明  
[http://bootboxjs.com/v3.x/index.html][http_bootboxjs.com_v3.x_index.html]

Bootbox.js下载  
我们可以在GitHub上找到开源的bootbox.js下载

[https://github.com/makeusabrew/bootbox][https_github.com_makeusabrew_bootbox]

如何使用此插件？

结合Yii2的GridView，我们来自定义Bootbox样式的弹窗：

一、覆盖yii.js模块  
Yii2自带的yii.js中定义了生成confirm对话框，以及执行action操作。

我们可以用过覆盖js方法来达到目的。

在@app/web/js/路径下创建一个javascript文件，比如main.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: "OK"
                    },
                    cancel: {
                        label: "Cancel"
                    }
                },
                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和main.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.js', 'js/main.js'];
        public $depends = [
            'yii\web\YiiAsset',
            'yii\bootstrap\BootstrapAsset',
        ];
    }

修改前：  
![这里写图片描述][bVlamp]

修改后：  
![这里写图片描述][bVlamq]

[http_bootboxjs.com_v3.x_index.html]: http://bootboxjs.com/v3.x/index.html
[https_github.com_makeusabrew_bootbox]: https://github.com/makeusabrew/bootbox
[bVlamp]: /images/20220715/42dc1aaa2a0c402ca52345a58e7e3c62.png
[bVlamq]: /images/20220715/0f3719fbfdb6473d8d7ef10e89acd0ed.png