根据Bootstrap的Modal开发的提示框
代码:
(function ($) {
$(function () {
var Modal = function () {
var htmlContent = "<div id=\"dvModalDialog\" class=\"modal\">" +
"<div class=\"modal-dialog modal-sm\">" +
"<div class=\"modal-content\">" +
"<div class=\"modal-header\">" +
"<button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>" +
"<h5 class=\"modal-title\"><i class=\"fa fa-exclamation-circle\"></i> [Title]</h5>" +
"</div>" +
"<div class=\"modal-body small\">" +
"<p>[Message]</p>" +
"</div>" +
"<div class=\"modal-footer\">" +
" <button type=\"button\" class=\"btn btn-primary ok\" data-dismiss=\"modal\">[BtnOk]</button>" +
" <button type=\"button\" class=\"btn btn-default cancel\" data-dismiss=\"modal\">[BtnCancel]</button>" +
" </div>" +
" </div> " +
" </div> " +
" </div>";
$("body").append(htmlContent);
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#dvModalDialog");
var ahtml = alr.html();
var _alert = function (options) {
alr.html(ahtml); // 复原
//alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
//alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
//alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "内容",
title: "提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: ,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
window.Alert = function (msg) {
Modal.alert({
msg: msg
})
return {
on: function (callback) {
if (callback && callback instanceof Function) {
Modal.alert({
msg: msg
}).on(callback);
}
}
}
}
window.Confirm = function (msg) {
Modal.confirm({
msg: msg
})
return {
on: function (callback) {
if (callback && callback instanceof Function) {
Modal.confirm({
msg: msg
}).on(callback);
}
}
}
}
});
//使用方法
//Alert("asdf").on(function () { alert("dddd");})
//Alert("aaaa");
//Confirm("你确定要删除吗?");
})(jQuery);
也可以直接写html
<!-- system modal start -->
<div id="dvModalDialog" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>
<!-- system modal end -->
显示结果:
Alert:

Confirm:


http://www.tuicool.com/articles/mMNrIr
根据Bootstrap的Modal开发的提示框的更多相关文章
- bootstrap dialog对话框,完成操作提示框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- 基于jquery的提示框JavaScript 插件,类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- ASP.NET 使用AJAX让GridView的数据行显示提示框(ToolTip)
介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...
- sweetalert提示框
文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
随机推荐
- 浏览器对js运行时间的限制
浏览器对js的运行时间进行了限制 1.调用栈尺寸限制 目前大部分的主流浏览器的调用栈尺寸都在10000以上.超过这个尺寸就会报栈溢出的错误 2.长时间脚本限制 浏览器记录一个脚本的运行时间,一旦达到这 ...
- Cookie/Session机制详解 <转>
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- [HNOI2004] 打砖块
1292. [HNOI2004] 打砖块 ★★ 输入文件:brike.in 输出文件:brike.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 在一个凹槽中放 ...
- Android DatepickerDialog(日期选择器)的使用
效果图如下: 日期和时间选择对话框,首先是要获得当前时间,这里用 java类中的Calendar来获得日期和时间(也可以用Date,但是不提倡,Date部分方法已经注释为过时), Calendar是一 ...
- spring低版本报错:java.lang.IllegalStateException: Context namespace element ‘annotation-config’ and its parser class [*] are only available on
参考来源:http://blog.csdn.net/sunxiaoyu94/article/details/50492083 使用spring低版本(2.5.6),使用jre 8发现错误: Unexp ...
- oracle的connect by level的示例
SELECT regexp_substr('CITY_AA,CITY_BB,CITY_CC,CITY_DD', '[^,]+', 1, LEVEL) t FROM dualCONNECT BY reg ...
- 优雅的go语言--入门篇
1.特点 1.静态类型,编译型的开源语言 2.脚本华的语法,支持多种编程范式(函数式&面向对象) 3.原生,给力的并发编程的支持 2.优势 1.脚本化的语法 2.静态类型+编译型,程序运行速度 ...
- Python爬虫框架Scrapy实例(二)
目标任务:使用Scrapy框架爬取新浪网导航页所有大类.小类.小类里的子链接.以及子链接页面的新闻内容,最后保存到本地. 大类小类如下图所示: 点击国内这个小类,进入页面后效果如下图(部分截图): 查 ...
- 【apt install】Unable to locate package python3-pip
解决办法: 先 sudo apt update 然后再 sudo apt install python3-pip,完成. 如果还不行的话参考这个:
- android 导出数据库文件
1.打开dos窗口,进入自己SDK路径下,再进入platform-tools下边 2.进入shell模式: adb shell 3.获取所有root权限: su root 4.打开需要导出的数据库文件 ...