替代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/
随机推荐
- python学习笔记之——正则表达式
1.re模块 Python通过re模块提供对正则表达式的支持,re 模块使 Python 语言拥有全部的正则表达式功能.使用re的一般步骤是先将正则表达式的字符串形式编译为Pattern实例,然后使用 ...
- 磁贴界面颜色 Metro UI Colors
http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...
- Android ListView实现新闻客户端的新闻内容图文混排
布局文件: <LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/andro ...
- ShareSDK分享和SMS的使用
使用的是第三方的Mob来实现分享和发送短信的Demo 如图是项目的结构,结合了分享,发送短信,读取短信内容的功能 代码地址:https://github.com/1825492258/MobShare ...
- C#中的特殊数据类型
一.c#中的特殊数据类型 C#中特殊数据类型有class类型.结构类型.数组类型.枚举类型.集合类型.委托类型.事件.Lambda表达式.接口类型. 1.class类型 1.1类定义 class St ...
- Python函数汇总(陆续更新中...)
range的用法 函数原型:range(start, end, scan): 参数含义: start:计数从start开始.默认是从0开始.例如range(5)等价于range(0, 5); end: ...
- SQL点点滴滴_SQL分页查询
假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...
- String str = "1,2,3,4,5,6" 如何将这个字符串转换成int数组
String str = "1,2,3,4,5,6"; string[] strS = str.Split(','); int[] num = new int[strS.Lengt ...
- C++显式隐式构造函数
https://blog.csdn.net/starlee/article/details/1331268#comments
- ASP.NET Core Startup类 Configure()方法 | ASP.NET Core 中间件详细说明
ASP.NET Core 程序启动过程如下 目录 Startup 类 Configure() 方法 中间件 使用中间件 Configure 方法 的参数 IApplicationBuilder Ext ...