基于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
随机推荐
- [Xamarin.Android]如何引用JAR檔案 (转帖)
這個範例是如何在Xamarin.Android中去使用一個我們自行在開發的JAR檔案. 主要會執行的步驟如下 1. 在Xamarin建立一個Android Java Bindings Library ...
- 全面解析C#中参数传递
一.引言 对于一些初学者(包括工作几年的人在内)来说,有时候对于方法之间的参数传递的问题感觉比较困惑的,因为之前在面试的过程也经常遇到参数传递的基础面试题,这样的面试题主要考察的开发人员基础是否扎实, ...
- SpringBoot项目中加入jsp页面
根据我们之前搭建好的SpringBoot+SSm的项目的基础上,来增加webapp/WEB-INF的文件,由此来完成jsp页面的跳转. 先增加jsp的pom依赖: <!-- https://mv ...
- JSTL之<c:set>的各种用法
<c:set>标签用于设置变量值和对象属性 语法格式 <span style="font-size:18px;"><c:set var="& ...
- SpringMVC中配置AOP拦截controller 失效
来源:http://www.oschina.net/question/222929_124314 目测大部分同学的aop失效都是因为在springmvc的配置文件里面扫描了类,那么spring去扫描的 ...
- JavaScript数据结构-17.图结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ASP.NET Core 的启动和运行机制
目录 ASP .NET Core 的运行机制 ASP .NET Core 的启动 ASP .NET Core 的管道和中间件 参考 ASP .NET Core 的运行机制 Web Server: AS ...
- R语言提取字符串的一部分substring函数
这个函数提取字符串的一部分. 语法 substring()函数的基本语法是: substring(x,first,last) 以下是所使用的参数的说明: x - 是字符向量输入. first - 是第 ...
- Linux原始套接字实现分析---转
http://blog.chinaunix.net/uid-27074062-id-3388166.html 本文从IPV4协议栈原始套接字的分类入手,详细介绍了链路层和网络层原始套接字的特点及其内核 ...
- C++实现顺序查找,折半查找,插值查找
1.顺序查找 从数组起始扫描到数组结尾,判断该索引数组是否和关键字相等,成功返回1 代码如下: //顺序查找 int seqSearch(int *array, int low, int high, ...