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

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

调用方法非常简单;

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

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


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

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

底层代码:

var BootstrapDialog1={
/***
* 弹窗底层
* @param title 弹窗标题
* @param html 弹窗内容
* @param url 弹窗关闭后的跳转地址
* @callback function 点击确定后的执行函数
* ***/
Init :function(title,html,url,callback,flog){
BootstrapDialog.show({
title : title,
type: BootstrapDialog.TYPE_DEFAULT,
size: BootstrapDialog.SIZE_NORMAL,
message: html,
cssClass:'BootstrapDialog1',
buttons: [{
label: '确定',
action: function(result){
if(callback){
eval(callback);
}
if(url){
window.location.href=url;
}
result.close();
}
},{
label: '取消',
cssClass:'cancel_btn',
action: function(result){
result.close();
}
}],
onhidden : function () {
if(url && flog){
window.location.href=url;
}
}
});
}
}

CSS代码如下:

/***弹窗样式开始*******/
.BootstrapDialog1{margin-top:15%;}
.BootstrapDialog1 .modal-dialog .modal-content{border-radius:0px;font-family:微软雅黑;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-header{background-color:#E8E8E8;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body{line-height:150px;text-align:center;font-size:15px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body img{margin-right:80px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body span{font-size:20px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer {border-top:1px dashed #e5e5e5}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons{text-align:right;}
.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;}
.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;} /***弹窗样式结束*******/

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. [Effective C++ --012]复制对象时勿忘其每一个成分

    引言: 在深拷贝和浅拷贝的理解中,我们知道了“拷贝构造函数”一词,并且也了解了它的构成. A(const A& r); // 形式有多种,在这里只列出一个 因此,在值传递的应用场景里,我们可以 ...

  2. oracle删除表语句

    删除表(记录和结构)的语名delete   ————   truncate      ———— drop DELETE (删除数据表里记录的语句) DELETE FROM表名 WHERE 条件; 注意 ...

  3. 按字母顺序排序的 arcpy.mapping 类列表

    arcpy.mapping 类可使用地图文档 (.mxd) 或图层文件 (.lyr) 中的不同对象类型的各种方法和属性.此文档可专门用作快速参考.有关详细信息,请使用链接跳转至各帮助页面. arcpy ...

  4. next nextval

    1 KMP算法中next与nextval值的计算 以上两张图代表了next值的求法,本人总结后做如下叙述: 根据公式可知: next[1]=0 next[2]=1 next[3]的求法根据公式可以直接 ...

  5. C#基础篇--文件(流)

    1:Path类是专门用来操作文件路径的(Path类是静态类):当然用字符串的处理办法也能实现.  string str = @"C:\Users\成才\Desktop\Hashtable.t ...

  6. 自定义手势_GestureOverlayVIew

    xml文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  7. 将Oracle表导入到Access方法,已经安装了Access但Win7提示 找不到access driver

    已经安装了Access但Win7提示 找不到access driver: 1.打开 "C:\Windows\SysWOW64\odbcad32.exe" 2.管理员cmd运行 命令 ...

  8. 【转】Emmagee app性能测试工具使用教程

    简介 Emmagee是网易杭州研究院QA团队开发的一个简单易上手的Android性能监测小工具,主要用于监控单个App的CPU,内存,流量,启动耗时,电量,电流等性能状态的变化,且用户可自定义配置监控 ...

  9. [MSDN]关键字查询语言 (KQL) 语法参考

    MSDN:http://msdn.microsoft.com/library/ee558911(v=office.15) 了解如何构造 SharePoint 2013 中的搜索功能 的 KQL 查询. ...

  10. Office365 InfoPath 表单的设计和应用(原创)

    表单的应用:我想到的有2种. 1 做为自定义表单库的模版. 通过发放url(模版链接)给用户来填写表单. 最后将在表单库中得到所有填写的信息列表. 如 2 上传表单做为ContentType 也就是自 ...