Yii2使用Bootbox插件实现自定义弹窗


Posted in Javascript onApril 02, 2015

本次尝试了一个新的小插件"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样式的弹窗:

一、覆盖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',
  ];
}

三、自定义Modal框

了解下bootbox.js源码,可以知道bootbox.js使用的是bootstarp的modal框,我们可以根据需求

修改bootbox.js源码中的"templates"变量,自定义Modal样式。

看下对比结果:

修改前:

Yii2使用Bootbox插件实现自定义弹窗

修改后:

Yii2使用Bootbox插件实现自定义弹窗

瞬间舒服多了,弹窗功能变的不再那么违和。类似这样的弹窗插件有很多,我想可以用同样的方法来实现使用其他的插件。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
jquery制作多功能轮播图插件
Apr 02 #Javascript
Javascript中3个需要注意的运算符
Apr 02 #Javascript
原生JS实现响应式瀑布流布局
Apr 02 #Javascript
Javascript变量的作用域和作用域链详解
Apr 02 #Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
JavaScript中操作Mysql数据库实例
Apr 02 #Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python 硬币兑换问题
2019/07/29 Python
Python程序暂停的正常处理方法
2019/11/07 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
车工岗位职责
2013/11/26 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
先进个人事迹材料
2014/01/25 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
第二课堂活动总结
2014/05/07 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL