这次我尝试了一个新的小插件“bootbox”。

在Yii2中，使用Bootstarp使界面更加美观，但美中不足的是在Gridview表的Action中，删除功能的弹出窗口有点违背Bootstrap，所以我们在网上找到了解决方案，并分享了这个插件的使用过程。

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

官方描述

http://bootboxjs.com/v3.x/index.html

下载Bootbox.js

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

https://github.com/makeusabrew/bootbox

这个插件怎么用？

结合Yii2的GridView，我们定制了Bootbox风格的弹出窗口：

I .涵盖yii.js模块

Yii2自带的Yii.js定义了确认对话框的生成和动作操作的执行。

我们可以使用叠加js方法来实现这个目标。

在路径@app/web/js/下创建一个javascript文件，比如main.js

代码如下：

yii . allow action=function($ e){ var message=$ e . data(' confirm ')；返回消息===undefined | | yii.confirm(消息，$ e)；};//-Delete action(boot box)-yii . confirm=function(message，ok，Cancel){ boot box . confirm({ message : message，button s : { confirm : { label : ' OK ' })，Cancel : { label : ' Cancel ' })，callback : function(confirm){ if(confirm){！ok | | ok()；} else {！cancel | | cancel()；} } } );//确认将总是在第一次调用时返回false//要取消单击处理程序返回false；}其次，注册你的资源包

需要注册bootbox.js和main.js文件。

修改文件：@app/assets/Assets.php

代码如下：

命名空间后端资产；使用yii web AssetBundle类AppAsset扩展了AssetBundle { public $ base path=' @ web root '；public $ BaseURl=“@ web”；public $ CSS=[' CSS/site . CSS ']；//注册js资源public $ js=['js/bootbox.js '，' js/main . js ']；public $ dependent=[' yii web YiiAsset '，' BootstrapAsset '，]；}第三，自定义模式框

了解bootbox.js的源代码，我们可以知道bootbox.js使用的是bootstarp的模态框，我们可以根据自己的需要来使用

修改bootbox.js源代码中的“templates”变量，并自定义Modal样式。

看看对比结果：

修改前：

修改后：

瞬间就舒服多了，弹窗功能变得不那么不一致了。像这样的弹出插件很多，我觉得我们可以用同样的方式使用其他插件。

以上就是本文的全部内容，希望大家喜欢。