平台用的全部都是BootStrapDialog的弹窗,然后美工设计了一个统一的样式,每次写的时候,都要对其进行样式重写;写吐了快,所以对BootStrap.底层做了修改;

也就是说,只要你要写的界面包含了bootstrap就可以使用这个标准的弹窗;

调用方法非常简单;

  1. 0、弹窗底层 参数介绍
  2. 1title 弹窗标题
  3. 2html 弹窗内容(可以夹带左侧的一个图标自动对齐)
  4. 3url 弹窗关闭后的跳转地址
  5. 4callback function 点击确定后的执行函数
  6. 5flog 是否强制跳转路径
  7. ***/
  8. 1、基本的乐学一百标准弹窗:
  9. BootstrapDialog1.Init('提示','你好');

  10. 当不传递回调函数,与url地址时,确定按钮与取消按钮点击都是关闭弹窗;
  11. 2、带有url跳转的弹窗:
  12. BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100');
  13. url可以是任意地址,不局限与乐学地址;点击确定后跳转;
  14. 3、带有回调函数的弹窗:
  15. 举个例子:
  16. <script type='text/javascript'>
  17. var TESTco={
  18. fun1:function (content) {
  19. alert(content);
  20. }
  21. }
  22. $(function(){
  23. BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100','TESTco.fun1(123);');
  24. });
  25. </script>
  26. 运行结果:


  27. 当然,不局限与非要传递一个url可以不传递,那么上边的执行结果就是,不跳转,执行函数;可以在函数中做任何事情;
  28. 4、强制跳转;
  29. 有些弹窗关闭时必须要跳转至某个路径,那么就会用到最后一个参数
  30. 标题,内容与URL要传递,可以不传递回调函数,最后将参数设置为true
  31. 任何形式的关闭都将自动跳转url 确定按钮,空白处,关闭按钮等;
  32. 至于其他的,比如不能点击空白处关闭弹窗等特殊的需求,就需要自己写了~
  1. 说到底,就是不想写那么多冗余的代码,一套样式哪儿都是。。而且每次都要写,太麻烦。。。

已提交SVN更新即可使用,当然肯定有更多的扩展空间的,欢迎继续优化~~~

底层代码:

  1. var BootstrapDialog1={
  2. /***
  3. * 弹窗底层
  4. * @param title 弹窗标题
  5. * @param html 弹窗内容
  6. * @param url 弹窗关闭后的跳转地址
  7. * @callback function 点击确定后的执行函数
  8. * ***/
  9. Init :function(title,html,url,callback,flog){
  10. BootstrapDialog.show({
  11. title : title,
  12. type: BootstrapDialog.TYPE_DEFAULT,
  13. size: BootstrapDialog.SIZE_NORMAL,
  14. message: html,
  15. cssClass:'BootstrapDialog1',
  16. buttons: [{
  17. label: '确定',
  18. action: function(result){
  19. if(callback){
  20. eval(callback);
  21. }
  22. if(url){
  23. window.location.href=url;
  24. }
  25. result.close();
  26. }
  27. },{
  28. label: '取消',
  29. cssClass:'cancel_btn',
  30. action: function(result){
  31. result.close();
  32. }
  33. }],
  34. onhidden : function () {
  35. if(url && flog){
  36. window.location.href=url;
  37. }
  38. }
  39. });
  40. }
  41. }

CSS代码如下:

  1. /***弹窗样式开始*******/
  2. .BootstrapDialog1{margin-top:15%;}
  3. .BootstrapDialog1 .modal-dialog .modal-content{border-radius:0px;font-family:微软雅黑;}
  4. .BootstrapDialog1 .modal-dialog .modal-content .modal-header{background-color:#E8E8E8;}
  5. .BootstrapDialog1 .modal-dialog .modal-content .modal-body{line-height:150px;text-align:center;font-size:15px;}
  6. .BootstrapDialog1 .modal-dialog .modal-content .modal-body img{margin-right:80px;}
  7. .BootstrapDialog1 .modal-dialog .modal-content .modal-body span{font-size:20px;}
  8. .BootstrapDialog1 .modal-dialog .modal-content .modal-footer {border-top:1px dashed #e5e5e5}
  9. .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons{text-align:right;}
  10. .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .btn{padding:8px 40px;background-color:#EC6C00;border-radius:0px;color:#FFFFFF;border:1px solid #EC6C00;}
  11. .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .cancel_btn{color:#666666;background-color:#FFFFFF;border:1px solid #CCCCCC;}
  12.  
  13. /***弹窗样式结束*******/

BootstrapDialog.show函数底层简化的更多相关文章

  1. 大话Python函数底层逻辑

    函数 叫 子过程或子程序 描叙的更为贴近实际应用场景 这和数学中的函数实现上不同但语义上相识,如 f(x) = expressiom, 给定一个确定的输入必然返回一个确定的输出 数学中函数的关系是通过 ...

  2. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  3. R中的高效批量处理函数(lapply sapply apply tapply mapply)(转)

    转自:http://blog.csdn.net/wa2003/article/details/45887055 R语言提供了批量处理函数,可以循环遍历某个集合内的所有或部分元素,以简化操作. 这些函数 ...

  4. 信号的捕捉与sigaction函数

    一.内核如何实现信号的捕捉 如果信号的处理动作是用户自定义函数,在信号递达时就调用这个函数,这称为捕捉信号.由于信号处理函数的代码是在用户空间的,处理过程比较复杂,举例如下: 1. 用户程序注册了SI ...

  5. Entity Framework 6 Recipes 2nd Edition(11-4)译 -> 在”模型定义”函数里调用另一个”模型定义”函数

    11-4.在”模型定义”函数里调用另一个”模型定义”函数 问题 想要用一个”模型定义”函数去实现另一个”模型定义”函数 解决方案 假设我们已有一个公司合伙人关系连同它们的结构模型,如Figure 11 ...

  6. Join函数 及Split函数精解示例

    '************************************************************************* '**模 块 名:Join函数 及Split函数精 ...

  7. OFFSET 函数

    转自http://office.microsoft.com/zh-cn/excel-help/HP010342739.aspx OFFSET 函数 全部显示 全部隐藏 本文介绍 Microsoft E ...

  8. 你不知道的函数节流,提高你的JS性能!

    浏览器的DOM计算处理非常耗费CPU时间,霸占内存,这对我们的开发来说是非常不友好的,,比如IE浏览器的onresize事件就可能在用户稍微拖动一下窗口时计算上千次,甚至更高频率直接让浏览器崩溃... ...

  9. 简述JavaScript函数节流

    为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...

随机推荐

  1. go strings 常用的几个函数

    fmt.Println(strings.ToUpper("hello world")) //转换为大写    fmt.Println(strings.ToLower("H ...

  2. 区域医疗移动医疗影像解决方案2--基于FLEX的PACS

    基于Flex的PACS和基于HTML5的PACS,都不是基于DICOM的WADO的方式,即所有的图像操作,移动.缩放.旋转.测量.伪彩.窗宽窗位调整等都是在本地浏览器能够完成,不用和服务器进行频繁的交 ...

  3. python无私有成员变量

    python解释器将__init__函数里的__z变量转成 _classname__z了,明确规则后外部依旧能够通过实力对象来訪问. In [1]: class aa: ...: def __init ...

  4. yum、RPM常用的命令(转)

    # yum install xxx            安装xxx软件# yum info xxx                查看xxx软件的信息# yum remove xxx         ...

  5. Android 图片三级缓存之内存缓存(告别软引用(SoftRefrerence)和弱引用(WeakReference))

    因为之前项目同事使用了图片三级缓存,今天整理项目的时候发现同事还是使用了软引用(SoftRefrerence)和弱引用(WeakReference),来管理在内存中的缓存.看到这个我就感觉不对了.脑海 ...

  6. C#_IComparer实例 - 实现ID或者yearOfscv排序

    调用LIST的Sort的时候会调用IComparer的默认实现,quicksort会调用每个元素的CompareTo的IComparable实现 using System; using System. ...

  7. 生产者/消费者问题的多种Java实现方式--转

    实质上,很多后台服务程序并发控制的基本原理都可以归纳为生产者/消费者模式,而这是恰恰是在本科操作系统课堂上老师反复讲解,而我们却视而不见不以为然的.在博文<一种面向作业流(工作流)的轻量级可复用 ...

  8. 比较js中创建对象的几种方式

    1.工厂模式 function createObj(name, sex){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.sa ...

  9. java validator的原理与使用

    http://developer.51cto.com/art/201104/253257_1.htm ava EE 6核心特征:Bean Validation特性概述(2) 2011-04-02 14 ...

  10. java基础学习总结三(jdk7新特性、变量(局部变量和成员变量)、常量以及运算符)

    一:jdk7新特性 可以表示二进制数值,以0b开头,中间可以使用下划线_分隔符.如下: @Test /** * 测试jdk新特性 */ public void testJdk7(){ int a=0b ...