js 重写 bootstrap 样式 alert/confirm 消息窗口
相信很多人都受够了 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">×</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 消息窗口的更多相关文章
- 基于js alert confirm样式弹出框
基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jQuery自定义alert,confirm方法及样式
学过JavaScript的都知道,alert().confirm()都是window对象特有的方法,而这两个方法我们平时使用的频率也很高,但是比较扎心的就是他自带的样式太... 因此,我整理了一个比较 ...
- 在Android的webview中定做js的alert,confirm和prompt对话框的方法
在Android的webview中定制js的alert,confirm和prompt对话框的方法 http://618119.com/archives/2010/12/20/199.html 1.首先 ...
- selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)
webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept ...
- Bootstrap Modal 框 alert confirm loading
/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...
- selenium自动化测试入门 Alert/Confirm/Prompt 弹出窗口处理
一.Alert/Confirm/Prompt弹出窗口特征说明 Alert弹出窗口: 提示用户信息只有确认按钮,无法通过页面元素定位,不关闭窗口无法在页面上做其他操作. Confirm 弹出窗口: 有确 ...
- easyui源码翻译1.32--Messager(消息窗口)
前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...
- messager(消息窗口)
一.$.messager.alert()类似js中的alert('String') 方法参数:title, msg, icon, function(回调函数) 描述:title头部面板标题.msg主要 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
随机推荐
- js移除Array中指定元素
首先需要找到元素的下标: var array = [2, 5, 9]; var index = array.indexOf(5); 使用splice函数进行移除: if (index > -1) ...
- maven编译报错 -source 1.7 中不支持 lambda 表达式
Maven项目编译失败: [ERROR] COMPILATION ERROR : [INFO] ---------------------------------------------------- ...
- Linq-System.Data.Linq.DataContext不包含采用“0”个参数的构造函数
解决方法: 打开linq to sql 的db文件***.designer.cs,加上下面的代码: 加上这些构造函数之后重新生成就可以了.
- php中对MYSQL操作之预处理技术(1)数据库dml操作语句
<?php //预处理技术 //创建一个mysqli对象 $mysqli = new MySQLi("主机名","mysqlusername"." ...
- [Algorithm] Radix Sort Algorithm
For example we have the array like this: [, , , , , ] First step is using Counting sort for last dig ...
- SqlServer日常积累(二)
1.Like运算符:将字符串表达式与 SQL表达式中的模式进行比较匹配. 语法 :expression Like 'pattern' ,expression为匹配字段,pattern为匹配字符串.可以 ...
- android模拟器使用gps定位
在模拟器上获取GPS信息时,使用Location loc = LocationManager.getLastKnownLocation("gps");来获取location信息,但 ...
- 【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐 新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...
- 算法笔记_194:历届试题 翻硬币(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 小明正在玩一个“翻硬币”的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情 ...
- VB调用VC dll的返回方式
第一种类型:数值传递 注意:在VB中,默认变量传递方式为ByRef为地址,而传递值就是用ByVal,还要注意在C++中,int类型的变量是32位的,在VB中要用long型变量来配合.VC++部分: e ...