相信很多人都受够了 alert、confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框。

实现起来很简单,bootstrap 本身就自带了 modal 模态框,样子还不错 :)就把它封装一下用吧。

无码无真相,少说多做,上代码。

项目是Asp.net Mvc架构的,方便全局调用,我直接在全局 Layout 页面加上以下HTML:

    <!-- system modal start -->
<div id="ycf-alert" 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">&times;</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 -->

不多说了,都是bootstrap modal的样式,不熟悉的朋友可以查查 bootstrap css ,中括号[....]的内容会最终替换为我们传入的参数显示。

js 封装如下:

;
$(function () {
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html(); //关闭时恢复 modal html 原样,供下次调用时 replace 用
//var _init = function () {
// alr.on("hidden.bs.modal", function (e) {
// $(this).html(ahtml);
// });
//}(); /* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */ 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); console.log(alr); 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: 500,
backdrop: 'static'
});
} return {
alert: _alert,
confirm: _confirm
} }();
});

调用方法:

// 四个选项都是可选参数
Modal.alert(
{
msg: '内容',
title: '标题',
btnok: '确定',
btncl:'取消'
}); // 如需增加回调函数,后面直接加 .on( function(e){} );
// 点击“确定” e: true
// 点击“取消” e: false
Modal.confirm(
{
msg: "是否删除角色?"
})
.on( function (e) {
alert("返回结果:" + e);
});

效果图:

还有一些细节需要完善,譬如blockUI等,晚了,先睡。

有空再补全。

js 重写 bootstrap 样式 alert/confirm 消息窗口的更多相关文章

  1. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. jQuery自定义alert,confirm方法及样式

    学过JavaScript的都知道,alert().confirm()都是window对象特有的方法,而这两个方法我们平时使用的频率也很高,但是比较扎心的就是他自带的样式太... 因此,我整理了一个比较 ...

  3. 在Android的webview中定做js的alert,confirm和prompt对话框的方法

    在Android的webview中定制js的alert,confirm和prompt对话框的方法 http://618119.com/archives/2010/12/20/199.html 1.首先 ...

  4. selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)

    webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept ...

  5. Bootstrap Modal 框 alert confirm loading

    /** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...

  6. selenium自动化测试入门 Alert/Confirm/Prompt 弹出窗口处理

    一.Alert/Confirm/Prompt弹出窗口特征说明 Alert弹出窗口: 提示用户信息只有确认按钮,无法通过页面元素定位,不关闭窗口无法在页面上做其他操作. Confirm 弹出窗口: 有确 ...

  7. easyui源码翻译1.32--Messager(消息窗口)

    前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...

  8. messager(消息窗口)

    一.$.messager.alert()类似js中的alert('String') 方法参数:title, msg, icon, function(回调函数) 描述:title头部面板标题.msg主要 ...

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

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

随机推荐

  1. 每日一水 POJ8道水题

    1. POJ 3299 Humidex 链接: http://poj.org/problem?id=3299 这道题是已知H,D,T三者的运算关系,然后告诉你其中两个.求另一个. #include&l ...

  2. 破解无线网络密码-BT3如何使用1

    一分钟制作 BT3 U盘版 方便,快捷简单 光盘版BT3, 大概694MB,直接刻盘,然后用光盘引导,即可进入bt3,连接为: http://ftp.heanet.ie/mirrors/backtra ...

  3. C++生成十字绣图案(二) 面向对象

    基本的十字绣线性生成中提供了判断下一步可以画的位置并且逐步生成的函数.以这些基本函数为基础,可以进行更多变化的图案设计. 为了方便的扩展,可以把线性生成写成一个类,以后的修改继承这个类. 头文件Bas ...

  4. PHPCMS V9 加密规则

    PHPCMS V9 加密规则 相关表:v9_admin 加密方式: md5(md5(password)+encrypt) 第一步:对输入的密码32位小写   MD5 对输入的密码进行trim过滤 第二 ...

  5. VB中将INT型转换成STRING和从STRING转换成INT型的函数

    CStr 函数示例本示例使用 CStr 函数将一数值转换为 String. Dim MyDouble, MyStringMyDouble = 437.324   ' MyDouble 为 Double ...

  6. try/except/else语句

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #try/except/else语句 #try语句分句形式 except: # ...

  7. 最快下载速度100Mbps!4G LTE技术全解析

    1导读,关于4G的几个关键概念 [PConline资讯]100Mbps下载速度是什么概念?比3G网速快50倍又是什么概念?比3G通信方式更灵活.通信频谱更宽绰.通信质量更高效.通信费用更便宜是怎样一个 ...

  8. Linux RAID5+备份盘测试

    RAID5磁盘阵列组技术至少需要3块盘来做,加上1块备份盘(这块硬盘设备平时是闲置状态不用工作,一旦RAID磁盘阵列组中有硬盘出现故障后则会马上自动顶替上去),总共是需要向虚拟机中模拟4块硬盘设备. ...

  9. PHP-Open Flash Chart报表生成

    下载: http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 安装: 解压ZIP包, 将open-flash-chart.s ...

  10. JavaScript-各种插件

    上传插件: 首推:uploadify http://www.admin10000.com/document/2980.html 滚动条插件: http://www.admin10000.com/doc ...