基于bootstrap模态框的alert弹窗
完成的效果如下:
html代码:
<!-- 弹出框 -->
<div class="modal fade" id="alert_like" tabindex="-1">
<!-- 窗口声明 -->
<div class="modal-dialog modal-sm">
<!-- 内容声明 -->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<div id="modal_con"></div>
</div>
<div class="modal-footer">
<button id="ok_btn" class="btn btn-sm btn-warning" data-dismiss="modal">确 定</button>
</div>
</div>
</div>
</div>
js代码如下:
/**
*
* @authors chenDeChang (you@example.org)
* @date 2016-11-10 17:04:35
*
*
*说明:本方法基于bootstrap对模态框进行封装;
*界面构造(必须给予madal控件ID)
<!-- 弹出框 -->
<div class="modal fade" id="xxx" tabindex="-1">
<!-- 窗口声明 -->
<div class="modal-dialog modal-sm">
<!-- 内容声明 -->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<div id="modal_con"></div>
</div>
<div class="modal-footer">
<button id="ok_btn" class="btn btn-sm btn-warning">确 定</button>
</div>
</div>
</div>
</div>
*调用代码:
* new show_modal({ modalId:"myModal",modalCon:'<p>这是提示的信息!</p>',bootstrapOptionObj:{show : true,backdrop : false}});
*参数说明:
*modalId:模态框控件的id,必需;
*titleTxt:模态框控件的标题名称;
*modalCon:模态框控件主体内容;
*bootstrapOptionObj:bootstrap模态框控件的方法属性对象;
*callback:处理完模态框后的回调方法;
*/ //显示弹窗函数
var show_modal = function(setting){
var _self = this; //判断为null或者空值
_self.IsNull = function(value) {
if (typeof (value) == "function") { return false; }
if (value == undefined || value == null || value == "" || value.length == 0) {
return true;
}
return false;
}
//默认配置
_self.DefautlSetting = {
modalId:'',
titleTxt: '温馨提示',
modalCon: '这是提示的信息!',
bootstrapOptionObj: {show : true},
callback: function() { }
};
//读取配置
_self.Setting = {
modalId: _self.IsNull(setting.modalId) ? _self.DefautlSetting.modalId : setting.modalId,
titleTxt: _self.IsNull(setting.titleTxt) ? _self.DefautlSetting.titleTxt : setting.titleTxt,
modalCon: _self.IsNull(setting.modalCon) ? _self.DefautlSetting.modalCon : setting.modalCon,
bootstrapOptionObj: _self.IsNull(setting.bootstrapOptionObj) ? _self.DefautlSetting.bootstrapOptionObj : setting.bootstrapOptionObj,
callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
};
//定义函数操作
_self.int = function(){
if (_self.Setting.modalId == '') {
return;
}
$("#myModalLabel").text(_self.Setting.titleTxt);//这里设置弹窗的标题
$("#modal_con").append(_self.Setting.modalCon);//设置弹窗内容
$("#"+_self.Setting.modalId).modal(_self.Setting.bootstrapOptionObj);//设置弹窗的bootstrap属性方法
_self.Setting.callback();
}
//执行操作
_self.int();
} //调用
new show_modal({modalId:'alert_like',titleTxt:'牛逼闪闪的标题',modalCon:'<p>数据正在提交中...</p>',bootstrapOptionObj:{show:true,backdrop:false},callback:timeClose()});
//show_modal回调函数,4s后隐藏弹窗
function timeClose(){
setTimeout(function(){
$('#alert_like').modal('hide');
},4000);
}
基于bootstrap模态框的alert弹窗的更多相关文章
- 基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
- 基于bootstrap模态框的二次封装
一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...
- 基于bootstrap模态框、fakeLoader实现全局遮罩层
一.fakeLoader.js介绍 fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果. 插件下载地址:https://github ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- Bootstrap模态框按钮
1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- bootstrap模态框传值操作
1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
随机推荐
- java 调用 C# 类库 实战视频, 非常简单, 通过 云寻觅 javacallcsharp 生成器 一步即可!
java 调用 C# 类库 实战视频, 非常简单, 通过 云寻觅 javacallcsharp 生成器 一步即可! 通过 云寻觅 javacallcsharp 生成器 自动生成java jni类库, ...
- 【Ubuntu】命令记录
cp 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中,就如同DOS下的copy命令一样,功能非常强大. 语法: cp [选项] 源文件或目录 目标文件或目录 说明:该命令把指定的源文件复制到目 ...
- FX4300超频4.7GHz
先贴出本人计算机配置: (本人cpu为fx4300,默认频率为3.8GHz) 谨记:超频有风险,很可能烧坏主板.cpu.内存等硬件,特别是增加主板电压时一定一次增加0.025V,不要一次增加太多,并且 ...
- 用table布局和div布局的区别
table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...
- C#中复制数组
string array = new string[]{"abc", "bcd", "efg"}; string bArray = new ...
- Java的枚举类型
引用并转载于:http://blog.csdn.net/ishallwin/article/details/9440251 1.什么是枚举: 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序 ...
- Gin实战:Gin+Mysql简单的Restful风格的API(二)
上一篇介绍了Gin+Mysql简单的Restful风格的API,但代码放在一个文件中,还不属于restful风格,接下来将进行进一步的封装. 目录结构 ☁ gin_restful2 tree . ├─ ...
- DateTime compare
DateTime t1 = new DateTime(100); DateTime t2 = new DateTime(20); if (DateTime.Compare(t1, t2) > 0 ...
- 【总结】java 后台文件上传整理
public Map<String,String> clientUploadAttachment(Long belongId, String fileSource, MultipartFi ...
- g2o error2
./pose_estimation_3d2d: error while loading shared libraries: libg2o_core.so: cannot open shared obj ...