替代alert的消息框和提示框
alert提示框由于外观不太友好,所以一般都不用alert了。
我在这里使用bootstrap的样式,写了一个可以单独显示消息,也可以确认取消的提示框,确认,取消的采用模式对话框方式,用一个div遮盖了后面所有内容。
使用的外观如下:
一:单独显示消息:
二:确认和取消:
单独显示消息的方法传递类型,信息,显示时间以及回掉函数。其中通过重载可以只传递信息。
确认和取消的方法传递类型,信息以及回掉函数。其中可以通过重载可以只传递信息和确认后执行的回掉函数。如果点击取消就去隐藏该提示框。
下面是这个提示框的js代码:
//success 成功
//info 信息
//warning 警告
//danger 错误!
function alertBox(type, msg, showTime, callBack) {
var divCss = "alert alert-" + type + " alert-dismissable";
if (showTime == null) showTime = 3000;
var divAlertBox;
if ($("#divAlertBox").length != 0) {
$("#divAlertBox span").text(msg);
divAlertBox = $("#divAlertBox");
divAlertBox.removeClass().addClass(divCss).slideDown(1000);
box(divAlertBox);
} else {
divAlertBox = $("<div id='divAlertBox' style='display:none;position:fixed;z-index:9999;' class='" + divCss + "'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button><span>" + msg + "</span></div>");
$("body").append(divAlertBox);
divAlertBox.slideDown(1000);
box(divAlertBox);
}
setTimeout(function () {
divAlertBox.fadeOut(1000);
if (callBack != null) {
callBack();
}
}, showTime);
} function alertSuccess(msg, showTime, callBack) {
alertBox("success", msg, showTime, callBack);
} function alertInfo(msg, showTime, callBack) {
alertBox("info", msg, showTime, callBack);
} function alertWarning(msg, showTime, callBack) {
alertBox("warning", msg, showTime, callBack);
} function alertDanger(msg, showTime, callBack) {
alertBox("danger", msg, showTime, callBack);
} //必传入回掉函数
function confirmBox(type, msg, callBack) {
var divCss = "alert alert-" + type;
var divConfirmBox;
if ($("#divConfirmBox").length != 0) {
var divConfirmBoxCover = $("#divConfirmBoxCover");
divConfirmBoxCover.show();
$("#divConfirmBox span").text(msg);
divConfirmBox = $("#divConfirmBox");
divConfirmBox.removeClass().addClass(divCss).slideDown(1000);
divConfirmBox.find("button:first")[0].onclick = callBack;
box(divConfirmBox);
} else {
var divConfirmBoxCover = $("<div id='divConfirmBoxCover' style='position:fixed;top:0px;left:0px;z-index:9998;width:100%;height:100%;'><div>");
divConfirmBox = $("<div id='divConfirmBox' style='display:none;position:fixed;z-index:9999;' class='" + divCss + "'><span>" + msg + "</span><br/></div>");
var btnYes = $("<button style='margin-top:20px;margin-right:50px;' type='button' class='btn btn-warning'>确定</button>");
var btnNo = $("<button style='margin-top:20px;float:right;' type='button' class='btn btn-primary' onclick='confirmBoxHide()'>取消</button>");
btnYes[0].onclick = callBack;
divConfirmBox.append(btnYes).append(btnNo);
$("body").append(divConfirmBox).append(divConfirmBoxCover);
divConfirmBox.slideDown(1000);
box(divConfirmBox);
}
} function confirmSuccess(msg, callBack) {
confirmBox("success", msg, callBack);
} function confirmInfo(msg, callBack) {
confirmBox("info", msg, callBack);
} function confirmWarning(msg, callBack) {
confirmBox("warning", msg, callBack);
} function confirmDanger(msg, callBack) {
confirmBox("danger", msg, callBack);
} function confirmBoxHide() {
$("#divConfirmBox").fadeOut(1000);
$("#divConfirmBoxCover").hide();
} function box(jqObj) {
//获取DIV为‘box’的盒子
var oBox = jqObj[0];
//获取元素自身的宽度
var L1 = oBox.clientWidth;
//获取元素自身的高度
var H1 = oBox.clientHeight;
//获取实际页面的left值。(页面宽度减去元素自身宽度/2)
var Left = (document.documentElement.clientWidth - L1) / 2;
//获取实际页面的top值。(页面宽度减去元素自身高度/2)
var top = (document.documentElement.clientHeight - H1) / 4;
oBox.style.left = Left + 'px';
oBox.style.top = top + 'px';
}
然后是测试页面的代码,记得引用1.10以上的jQuery和bootstrap.min.css,bootstrap.min.js。
这里是将上面的JS代码单独放在一个js文件中,然后引用,加了那么多<br/>是为了观看滚动的效果——提示框是否会跟着移动。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="NewFolder1/bootstrap.min.css" rel="stylesheet" />
<script src="NewFolder1/jquery-1.11.1.min.js"></script>
<script src="NewFolder1/bootstrap.min.js"></script>
<script src="JavaScript1.js"></script>
</head>
<body>
<input type="button" name="name" value="alertSuccess" onclick="alertSuccess('提示信息:成功!')" />
<input type="button" name="name" value="alertInfo" onclick="alertInfo('提示信息:成功!')" />
<input type="button" name="name" value="alertWarning" onclick="alertWarning('提示信息:警告!')" />
<input type="button" name="name" value="alertDanger" onclick="alertDanger('提示信息:危险!')" />
<br />
<input type="button" name="name" value="confirmSuccess" onclick="confirmSuccess('提示信息:成功!', function () { window.location = 'http://www.cnblogs.com/xueyeduling/p/6833034.html'; })" />
<input type="button" name="name" value="confirmInfo" onclick="confirmInfo('提示信息:成功!' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<input type="button" name="name" value="confirmWarning" onclick="confirmWarning('提示信息:警告!' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<input type="button" name="name" value="confirmDanger" onclick="confirmDanger('提示信息:危险!' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
替代alert的消息框和提示框的更多相关文章
- js三种消息框总结-警告框、确认框、提示框
js消息框类别:警告框.确认框.提示框 警告框:alert("文本"); 确认框:confirm("文本"); 提示框:prompt("文本" ...
- JS_Window-三种消息框:警告框、确认框、提示框、页面显示时间-计时-延时
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- uwp - ContentDialog - 自定义仿iphone提示框,提示框美化
原文:uwp - ContentDialog - 自定义仿iphone提示框,提示框美化 为了实现我想要的效果花费了我很长时间,唉,当初英语不好好学,翻官网翻了半天才找到,分享给刚入门的新手. 首先看 ...
- JavaScript 中创建三种消息框:警告框、确认框、提示框。
网址:http://www.w3school.com.cn/js/js_popup.asp 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语 ...
- 可以替代alert 的漂亮的Js弹框
1 基本弹框 2确认框 3又一种确认框 4带返回的弹框 5带返回的探矿 6 6 一切尽在 http://t4t5.github.io/sweetalert/
随机推荐
- Java学习笔记(1)----规则集和线性表性能比较
为了比较 HashSet,LinkedHashSet,TreeSet,ArrayList,LinkedList 的性能,使用如下代码来测试它们加入并删除500000个数据的时间: package sr ...
- 使用OmniGraffle创建流程图
Mac下使用OmniGraffle创建是一个不错的选择 可以保存为OG格式,可以导出为VXD格式供visio使用
- 谁动了我的Mac ??
教大家一种方法,看看有没有人在自己对Mac睡眠后对其进行唤醒 一:应用程序里有个控制台,可以将这个打开,输入wake reason 二:在终端输入:syslog |grep -i "Wake ...
- 一次spring aop 切面的问题
最新项目有个新需求,要在已经写好的controller里面 加上传入参数的验证,由于有多个 controller而且验证每个都要调用其他的服务,故决定采用spring的aop方式. 1.添加aop的验 ...
- winform基础控件总结
转自:http://www.cnblogs.com/top5/archive/2010/04/29/1724039.html 基础 - 常用控件 C# WinForm开发系列 - CheckBox/B ...
- python文本操作
file_obj=file("文件路径","模式") 打开文件的模式有: r,以只读方式打开文件 w,打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该 ...
- js:自动亮起100盏灯
1) 使用js在页面上显示100盏灯,并标记从1到100的编号2) 页面加载后3秒,从编号是1的灯依次自动亮起.3) 每过0.5秒亮下一盏灯(10分)4) 所有灯亮起后,弹出确 ...
- centos 7.2 Apache+mysql+php step by step备忘
1. 如何允许laravel程序执行sudo shell脚本? chmod u+w /etc/sudoers ; echo "apache ALL=(ALL) NOPASSWD:ALL&qu ...
- Andriod(3)——Understanding Android Resources
Now, we will follow that introduction with an in-depth look at Android SDK fundamentals and cover re ...
- python面向对象编程(1)——基本概念,术语,self,构造器
1 python面向对象命名规范 类名通常由大写字母打头.这是惯例标准. 数据值应该使用名词作为名字,方法使用动词加对象的方式,若使用混合记法,则方法名的第一个字母首字母小写,后面的单词的首字母大写 ...