呃，系统自带的alert、confirm等弹出框实在是难看，作为一个颜控，这能忍？
这里我用的是kartik-v/yii2-dialog，这个是基于bootstrap3-dialog这个来做了一些常用alert、confirm和dialog的小部件封装，当然了，本质上还是bootstrap3-dialog,可以用原生的方法，原生方法的用法点这里，而bootstrap3-dialog又是基于bootstrap3的modals做的封装。嗯，基本关系就是这样。在搜索这个相关知识时，经常会看到有人提到bootbox，这个同样是流行的一个美化插件，基本原理类似，用法稍微不同，在packagist搜索yii2 bootbox会发现也有人为Yii2做了集成（或者自己集成也行，后面会讲到），同样值得推荐。
按照说明安装，最好是按照github的说明，因为最新的一般都会在这里先更新。composer中要用@dev。可以看这里的说明，如果不成功，先composer self-update，再试下，当初安装时也是各种报错不行，后来突然就好了。稍微注意的是confirm，dialog调用时要求必须写回调，否则就报错。
还是蛮漂亮的。但是像是Yii框架Gridview自带的confirm（像是删除按钮），点击时还是原生的，因为它的源码就是用的confirm命令，好在Yii框架提供了方法，可以让我们覆盖confirm方法。具体可如下操作：
1、我们可以先看下在vendor/yiisoft/yii2/assets/yii.js文件中的confirm方法：注释中就可以看到，可以用yii.confirm来重写此设置。
<span>/*</span><span>*
* Displays a confirmation dialog.
* The default implementation simply displays a js confirmation dialog.
* You may override this by setting `yii.confirm`.
* @param message the confirmation message.
* @param ok a callback to be called when the user confirms the message
* @param cancel a callback to be called when the user cancels the confirmation
</span><span>*/</span><span>
confirm</span>: <span>function</span> (message, ok,<span> cancel) {
</span><span>if</span><span> (confirm(message)) {
</span>!ok ||<span> ok();
} </span><span>else</span><span> {
</span>!cancel ||<span> cancel();
}
}</span>,2、那我们就重写，可以在backend/web/js中新建confirm.js文件，然后重新，可参照此文章，这是设置bootbox的，而且版本有点过时，不过下方的评论有最新方法。而我们的设置与此原理是一致的，只不过是改成kartik-v/yii2-dialog所需求的参数样式：
yii.confirm = <span>function</span> (message, ok,<span> cancel) {
krajeeDialog</span>.confirm(message,<span>function</span><span>(data){
</span><span>if</span><span> (data) {
</span>!ok ||<span> ok();
} </span><span>else</span><span> {
</span>!cancel ||<span> cancel();
}
});
</span><span>//</span><span> confirm will always return false on the first call
// to cancel click handler</span>
<span>return</span> <span>false</span><span>;
}</span>3、我们需要注册此js，可以在backend/assets/Appasset.php中添加上方的js文件：
<span>class</span> AppAsset <span>extends</span><span> AssetBundle
{
</span><span>public</span> <span>$basePath</span> = '@webroot'<span>;
</span><span>public</span> <span>$baseUrl</span> = '@web'<span>;
</span><span>public</span> <span>$css</span> =<span> [
</span>'css/site.css',<span>
];
</span><span>public</span> <span>$js</span> =<span> [
</span>'js/confirm.js',<span>//</span><span>就是这里了</span>
<span> ];
</span><span>public</span> <span>$depends</span> =<span> [
</span>'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',<span>
];
}</span>这样一来，在点击删除按钮便会发现可以调用了：
由于我们用的是kartik-GridView，它的两个功能展示全部记录和导出csv等的提示，都是用的原生的confirm，强迫症的我们能忍吗？好吧，我忍了，这里只给出改的思路，尤其是只懂基础js的我来说，先把时间放在其它地方吧。
在改之前，首先我们需要明确kartik-v/yii2-dialog的confirm（bootbox同样）和原生confirm的不同。原生confirm是同步的，而kartik-v/yii2-dialog的confirm方法是异步回调的。这导致原生的confirm可以直接这样写：
<span>function</span><span> abc(){
</span><span>return</span> window.confirm('123')；<span>//</span><span>confirm点击确认返回true，取消返回false，不点击就等着用户点击 </span>
<span>}
</span><span>if</span><span>(abc()){
alert(</span>'456');<span>//</span><span>点击是，会弹出alert弹窗</span>
}而如果你用kartik-v/yii2-dialog的confirm也这样写，则永远不会弹窗，因为是异步回调的，不会去等你点击。
<span>function</span><span> abc(){
krajeeDialog.confirm(</span>'123',<span>function</span><span>(result){
</span><span>if</span><span>(result){
</span><span>return</span> <span>true</span><span>;
}</span><span>else</span><span>{
</span><span>return</span> <span>false</span><span>;
}
});
}
</span><span>if</span><span>(abc()){
alert(</span>'456');<span>//</span><span>由于是异步回调，所以不管点不点都不会弹窗</span>
}可能有人会想（比如我）这样写行不行？不行，不支持这样的写法，bootstrap3-dialog中这样写返回的是窗口有没有open。
<span>if</span>(krajeeDialog.confirm('123',<span>function</span><span>(result){}){
</span><span>return</span> <span>true</span><span>;
}</span><span>else</span><span>{
</span><span>return</span> <span>false</span><span>;
}</span>所以要想在kartik-v/yii2-dialog的confirm中执行alert，只能将alert放在回调函数中：
<span>function</span><span> abc(){
krajeeDialog.confirm(</span>'123',<span>function</span><span>(result){
</span><span>if</span><span>(result){
alert(</span>'456'<span>);
}</span><span>else</span><span>{
</span><span>//</span><span>do something</span>
<span> }
});
}</span>以上的不同，再加上是在vendor中修改有违原则啊（拿出来很费劲，又是继承什么的，而导出csv的js没找到类似yii.js那样覆盖的方法，只能重新写引入什么的），也是我不想改源码的原因。坑爹。好吧，下面继续说怎么改：
1、{toggleData}显示全部记录，它的调用confirm是在vendor/kartik-v/yii2-grid/GridView.php中的getToggleDataScript方法，我们修改return就可以：
<span>$url</span>=Url::<span>current</span>([<span>$this</span>->_toggleDataKey => <span>$tag</span>]);<span>//</span><span>先定义需要跳转的url</span>
<span>return</span> "\$('#{<span>$this</span>->_toggleButtonId}').on('{<span>$event</span><span>}',function(e){
e.preventDefault();//先阻止点击事件
krajeeDialog.confirm('{</span><span>$msg</span><span>}',function(data){
if (data) {
window.location.href='{</span><span>$url</span><span>}';//点击是则跳转
}
});
//下面这条是原来的方法
// if(!window.confirm('{</span><span>$msg</span><span>}')){e.preventDefault();}
});</span>";2、{export}中的导出提示，是在vendor/kartik-v/yii2-grid/assets/js/kv-grid-export.js中：这个就麻烦了，感觉需要重写关联的notify方法和listenClick方法。谁写完了，麻烦告诉一声吧。
kvConfirm: <span>function</span><span> (msg) {
</span><span>try</span><span> {
</span><span>return</span> window.confirm(msg);<span>//</span><span>调的这个</span>
<span> }
</span><span>catch</span><span> (err) {
</span><span>return</span> <span>true</span><span>;
}
}</span>上面就这样吧，下面说下session中的flash，我们一般创建完成等操作时，需要给点提示是完成了还是怎么着。在Yii中有自带flash方法来实现，可点击这里查看，其实在adminLTE这个后台框架中已集成了Alert小部件，我们可以在backend/views/layout/content.php中发现此小部件的调用，这是我们只需要在controller中添加setFlash方法，那么就能在view中接受到：
<span>public</span> <span>function</span><span> actionCreate()
{
</span><span>$model</span> = <span>new</span><span> User();
</span><span>if</span> (<span>$model</span>->load(Yii::<span>$app</span>->request->post()) && <span>$model</span>-><span>save()) {
</span><span>$session</span> = Yii::<span>$app</span>->session;<span>//</span><span>session</span>
<span>$session</span>->setFlash('success', '创建成功');<span>//</span><span>添加flash</span>
<span>return</span> <span>$this</span>->redirect(['index'<span>]);
} </span><span>else</span><span> {
</span><span>return</span> <span>$this</span>->render('create',<span> [
</span>'model' => <span>$model</span>,<span>
]);
}
}</span>捕捉到的：（adminLTE的alert样式颜色就是这么深，而Yii框架自带的颜色虽然浅，但是与此后台框架的颜色也不搭配）
进一步扩展就是，如果是成功的提示，那我5s后可以隐藏，那可以这样设置，在backend/views/layout/content.php中添加下面渐隐的js代码
<?php <span>//</span><span>这是一段,在显示后定里消失的JQ代码</span>
<span>$this</span>->registerJs("<span>
$('.alert-success').animate({opacity: 1.0}, 5000).fadeOut('slow');
</span>"<span>);
</span>?> 唉？为什么突然说到flash，明显前后文不统一吗，差评！主要是，既然有alert形式的flash，那当然也可以用弹窗的方式来展示啊。kartik-v/yii2-dialog虽然有alert、dialog功能，但是在这里都和我想要的不太一样，所以我们直接调用原生的方法来写，主要的方法是这样：（下面有详细封装）
<span>var</span> dialogShow=<span>BootstrapDialog.show({
type:BootstrapDialog.TYPE_SUCCESS,
title:</span>'提示消息'<span>,
message:</span>'创建成功，3s后自动关闭'<span>,
size:BootstrapDialog.SIZE_SMALL,
buttons:[
{
label: </span>'关闭'<span>,
action: </span><span>function</span><span>(dialogItself){
dialogItself.close();
}
}
]
});</span>我们当然可以直接在index.php中写，但是东西有点多，最好封装一下，好吧，那就参照Alert来写一个Popup的widget来用吧：(一些介绍点这里)，在common/widgets中新建Popup.php，直接贴代码吧。由于只是注册js，没有返回值什么的，所以没有用到run()方法。
1 php 2 3 namespace common\widgets; 4 5 class Popup extends \yii\bootstrap\Widget 6 { 7 /** 8 * 样式数组 9 * @var [type] 10 */ 11 public $popupTypes = [ 12 'default' => 'BootstrapDialog.TYPE_DEFAULT', 13 'info' => 'BootstrapDialog.TYPE_INFO', 14 'primary' => 'BootstrapDialog.TYPE_PRIMARY', 15 'success' => 'BootstrapDialog.TYPE_SUCCESS', 16 'warning' => 'BootstrapDialog.TYPE_WARNING', 17 'danger' => 'BootstrapDialog.TYPE_WARNING' 18 ]; 19 /** 20 * 尺寸数组 21 * @var [type] 22 */ 23 public $sizeTypes=[ 24 'nomal'=>'BootstrapDialog.SIZE_NORMAL', 25 'small'=>'BootstrapDialog.SIZE_SMALL', 26 'wide'=>'BootstrapDialog.SIZE_WIDE', 27 'large'=>'BootstrapDialog.SIZE_LARGE' 28 29 ]; 30 /** 31 * 标题 32 * @var [type] 33 */ 34 public $title; 35 /** 36 * 尺寸 37 * @var [type] 38 */ 39 public $size; 40 41 public function init() 42 { 43 parent::init(); 44 //默认标题 45 if ($this->title === null) { 46 $this->title = '消息提示'; 47 } 48 //默认样式 49 if ($this->size===null || !isset($this->sizeTypes[$this->size])){ 50 $this->size='small'; 51 } 52 53 $session = \Yii::$app->session; 54 $flashes = $session->getAllFlashes(); 55 56 $view = $this->getView(); 57 58 foreach ($flashes as $type => $data) { 59 if (isset($this->popupTypes[$type])) { 60 $data = (array) $data; 61 foreach ($data as $i => $message) { 62 $view->registerJs(" 63 var dialogShow=BootstrapDialog.show({ 64 type:".$this->popupTypes[$type].", 65 title:'".$this->title."', 66 message:'".$message."', 67 size:".$this->sizeTypes[$this->size].", 68 buttons:[ 69 { 70 label: '关闭', 71 action: function(dialogItself){ 72 dialogItself.close(); 73 } 74 } 75 ] 76 }); 77 "); 78 // 如果是成功，需要增加3s后自动关闭，其余警告等则不需要 79 if($type=='success'){ 80 $view->registerJs(" 81 setTimeout(function(){ dialogShow.close() }, 3000); 82 "); 83 } 84 } 85 86 $session->removeFlash($type); 87 } 88 } 89 } 90 } 太长隐藏然后在backend/views/layout/content.php引用小部件：
<span>use</span><span> common\widgets\Popup;
</span><?= Popup::<span>widget([
</span>'title'=>'消息',
'size'=>'small'<span>//</span><span>参数不写会有默认值</span>
]) ?>看下效果：如果是success，则会自动消失。
那弹出框Popup和提示Alert最大区别是，当存在addFlash方法时，Alert可以依次排列显示多个，而弹出框Popup则会重复覆盖显示，不太友好。当然了在不用addFlash方法时弹出框Popup的显示更漂亮醒目。
好了，就这样，睡觉先！
Welche Software ist Flash?
Gründe für Sitzungsfehler
Lösung für Sitzungsfehler
So implementieren Sie einen Zeilenumbruch in der Warnung
Überprüfen Sie den Online-Status Ihrer Freunde auf TikTok
So beheben Sie das Fehlen von winntbbu.dll
Wofür wird Javascript hauptsächlich verwendet?
Welche Kodierung wird in einem Computer zur Verarbeitung von Daten und Anweisungen verwendet?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
