代码:

(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开发的提示框的更多相关文章

  1. bootstrap dialog对话框,完成操作提示框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  2. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  4. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  5. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  6. 基于jquery的提示框JavaScript 插件,类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  7. ASP.NET 使用AJAX让GridView的数据行显示提示框(ToolTip)

    介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...

  8. sweetalert提示框

    文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...

  9. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

随机推荐

  1. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

  2. CVE-2018-2628 weblogic WLS反序列化漏洞--RCE学习笔记

    weblogic WLS 反序列化漏洞学习 鸣谢 感谢POC和分析文档的作者-绿盟大佬=>liaoxinxi:感谢群内各位大佬及时传播了分析文档,我才有幸能看到. 漏洞简介 漏洞威胁:RCE-- ...

  3. 360全景图three.js

    1.three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能. Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影. ...

  4. Egret Wing4.0.3 动画编辑器

    一 exml上摆放组件 切换动画编辑 创建动画组,命名test1. 选中一个对象,创建动画(必须选中一个对象后,+号才会亮.且一个对象只能创建一个动画) 之后和Flash差不多.在时间轴插入关键帧. ...

  5. 【BZOJ5099】[POI2018]Pionek 几何+双指针

    [BZOJ5099][POI2018]Pionek Description 在无限大的二维平面的原点(0,0)放置着一个棋子.你有n条可用的移动指令,每条指令可以用一个二维整数向量表示.每条指令最多只 ...

  6. 【Android】Scrollview 相关问题汇总

    去除Scrollview 滑动边界渐变颜色 去掉滚动条,并将在滑动时,边界不会变成灰白 <horizontalscrollview android:overScrollMode="ne ...

  7. shell 文件备份脚本

    #!/bin/bash #输入参数:文件名 filename=$ #源文件目录 directory=/opt/docker/cloud-driver-training/apps #备份文件目录 bac ...

  8. scribe、chukwa、kafka、flume日志系统对比

    scribe.chukwa.kafka.flume日志系统对比   1. 背景介绍许多公司的平台每天会产生大量的日志(一般为流式数据,如,搜索引擎的pv,查询等),处理 这些日志需要特定的日志系统,一 ...

  9. Django - 路由层(URLconf)

    一.django 静态文件配置 /mysite1/settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_ ...

  10. vue - nodejs

    一.知识 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 Chr ...