原文:四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
虽然说现在官方的自带插件已经有很多了，但是有时候往往不能满足我们的需求，下面我简单介绍一些
常见的四种提示弹出框(success，loading，error，warning)，我分别用原生JavaScript和jQuery来介绍分享给各位博友！
一、首先介绍原生JavaScript来实现四种提示弹出框：
第一步：先看看html的建立
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JavaScript弹出对话框层提示插件</title>
<script type="text/javascript" src="dialogPlugin.js"></script>
<style>
.a{display:block; width:50%; height:35px; line-height:35px; background-color:#333333; color:#fff; text-decoration:none; text-align:center; border-radius:8px; margin:10px auto 0;}
</style>
</head> <body> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!');">提示更新成功</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_loading','内容加载!');">提示内容加载</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_warning','输入有误!');">提示输入有误</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失败!');">提示更新失败</a> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!',2,true);">提示更新成功2秒后自动关闭</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_loading','内容加载!',2,true);">提示内容加载2秒后自动关闭</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_warning','输入有误!',2,true);">提示输入有误2秒后自动关闭</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失败!',2,true);">提示更新失败2秒后自动关闭</a> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示更新成功2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_loading','内容加载!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示内容加载2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_warning','输入有误!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示输入有误2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失败!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示更新失败2秒后自动关闭后跳转url</a> </body>
</html>
第二步：编写js文件
/**
* 名称：EthanCoco原生弹出对话框提示层插件
* 语言：原生JavaScript
* 作者：EthanCoco
* 博客：http://www.cnblogs.com/jianyeLee/
* 日期：2015-08-15
*/ var dialog_timer; //定义全局变量； window.onload=function(){
//在这里我们没有把css单独放在一个css文件当中，而是通过js来创建
//在 cssText中，我们有#dialog_layer的div（不过被我去掉了，无影响）
//dialog_dialog的div.用于弹出提示框的对话层
//dialog_success的class，用于“成功”的提示弹出框样式
//dialog_loading的class，用于“加载”的提示弹出框样式
//dialog_warning的class，用于“警告”的提示弹出框样式
//dialog_error的class，用于“错误”的提示弹出框样式
var cssText="html,body{height:100%;width:100%;padding:0px;margin:0px;}#dialog_layer{background-color:#000;postion:fixed;left:0;top:0;width:200px;height:100px;z-index:999999;display:none;background-color:rgba(0,0,0,0.6);}#dialog_dialog{width:200px;height:100px;text-align:center;border-radius:8px;position:fixed;left:50%;top:50%;margin-left:-106px;margin-top:-56px;z-index:10000000;background-color:#fff;background-repeat:no-repeat;line-height:140px;font-size:14px;font-weight:bold;display:none;letter-spacing:1px;}.dialog_success{background-image:url('images/success.png');color:#1fce11;background-size:32px 32px;background-position:center 20px;border:6px #1fce11 solid;}.dialog_loading{background-image:url('images/loading.gif');color:#333333;background-size:50px 50px;background-position:center 15px;border:6px #333333 solid;}.dialog_warning{background-image:url('images/warning.png');color:#F90;background-size:32px 32px;background-position:center 20px;border:6px #F90 solid;}.dialog_error{background-image:url('images/error.png');color:#F00;background-size:32px 32px;background-position:center 20px;border:6px #F00 solid;}"; //创建css样式
createStyle(cssText); //createStyle(content)函数用于创建css样式（在下面） //创建遮罩层
// var dialog_layer_div = document.createElement('div');
// dialog_layer_div.setAttribute('id','dialog_layer');
// document.body.appendChild(dialog_layer_div); //创建对话层
var dialog_dialog_div=document.createElement('div'); //创建div
dialog_dialog_div.setAttribute('id','dialog_dialog'); //设置div的id为“dialog_dialog”
document.body.appendChild(dialog_dialog_div); //把div加载到html页面的body中去
} function createStyle(content){ //创建“创建css样式”的函数
//创建样式节点， 相当于<style type="text/css">里面就是cssText了</style>
var style=document.createElement("style");
style.setAttribute("type", "text/css");
if(style.styleSheet){// IE
style.styleSheet.cssText = content;
} else {// w3c
var cssText = document.createTextNode(content);
style.appendChild(cssText);
}
//获取头部标签对象
var heads = document.getElementsByTagName("head");
if(heads.length){
heads[0].appendChild(style);
}else{
document.documentElement.appendChild(style);
}
} /**
* @Description 弹出对话框层
* @param className 样式名称（成功：dialog_success，失败：dialog_error，加载：dialog_loading，警告：dialog_warning）
* @param content 提示内容
* @param timeout 定时关闭时间
* @param flag 是否自动关闭
* @param url 对话框关闭时跳转的url
* @return
*/
function dialog_dialogShow(className,content,timeout,flag,url){
//获取遮罩层对象
// var dialog_layer = document.getElementById("dialog_layer");
//获取对话框层对象
var dialog_dialog = document.getElementById("dialog_dialog");
timeout = timeout || 3; //设置时间参数的默认值3秒
flag = flag || false; //设置默认flag标志位false，来控制时间和URL
url = url || ""; //设默认URL跳转页面的地址为空
dialog_dialog.className = className; //className为四种提示弹出框的class名称
dialog_dialog.innerHTML = content; //弹出框中显示的提示字符
dialog_dialog.style.display = "block"; //把显示样式设为块级
// dialog_layer.style.display = "block";
if(flag){ //判断是否关闭对话层
//setTnterval(functionName，time);的作用是不停的调用某个函数（只写函数名称），以time的频率
dialog_timer = window.setInterval(function(){
dialog_dialogClose(url); // 关闭对话层
window.clearInterval(dialog_timer); //与setInterval()相对的，直到clearInterval()出现，就停止setInterval（）
},timeout*1000);
}
} /**
* @Description 关闭对话框层
* @param url 关闭层时跳转的url
* @return
*/
function dialog_dialogClose(url){
//获取遮罩层对象
// var dialog_layer = document.getElementById("dialog_layer");
//获取对话框层对象
var dialog_dialog = document.getElementById("dialog_dialog");
url = url || "";
dialog_dialog.style.display = "none";
// dialog_layer.style.display = "none";
if(url!=""){ //如果URL不为空就跳转到指定的页面
window.location.href = url; //在div-css的细节里面讲过，window.location.href="";这个要记住，经常用到的
}
}
原生的JavaScript提示弹出框就好了 这里的页面展现就不占用空间了，文章末尾有代码的整个原文提取码，感兴趣的博友可以去下载实验
二、现在介绍一下jQuery写的提示弹出框（有jQueryUI辅助）
第一步：编写html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dialog提示弹出框</title> <script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.ui.js"></script> //引入jQueryUI样式来辅助
<script type="text/javascript" src="ethanDialog.js"></script>
<link href="ethanDialog.css" rel="stylesheet" type="text/css" />
</head>
<body> <div id="ethan_dialog">
<a class="a1" href="#">提示更新成功(URL)</a>
<a class="a2" href="#">提示内容加载</a>
<a class="a3" href="#">提示输入有误</a>
<a class="a4" href="#">提示更新失败</a>
</div> //下面是四个提示弹出框的模块
<div class="ethan_success">
<span>更新成功</span><br/>
<img src="data:images/success.png" class="ethan_img">
</div>
<div class="ethan_loading">
<span>内容加载</span><br/>
<img src="data:images/loading.gif" class="ethan_img">
</div>
<div class="ethan_warning">
<span>输入有误</span><br/>
<img src="data:images/warning.png" class="ethan_img">
</div>
<div class="ethan_error">
<span>更新失败</span><br/>
<img src="data:images/error.png" class="ethan_img">
</div>
</body>
</html>
第二步：编写css文件
html,body{
width:100%;
height:100%;
margin:;
padding:;
}
.a1,.a2,.a3,.a4{
display:block;
width:300px;
height:35px;
line-height:35px;
background-color:green;
color:#red;
text-decoration:none;
text-align:center;
border-radius:8px;
margin:10px auto 0;
}
.ethan_success,.ethan_loading,.ethan_warning,.ethan_error{
background : lightblue;
text-align:center;
}
.ethan_success,.ethan_loading,.ethan_warning,.ethan_error span{
line-height :25px;
font-size: 14px;
font-weight : bold;
color : green;
}
.ethan_success .ethan_img{
margin-top : 20px;
}
.ethan_loading .ethan_img{
margin-top : 0px;
}
.ethan_warning .ethan_img{
margin-top : 20px;
}
.ethan_error .ethan_img{
margin-top : 20px;
}
css的样式都很简单 就不多说了
第三步：编写js代码文件
/**
* 名称：EthanCoco原创弹出对话框提示层插件ethanDialog
* 语言：jQuery，jQueryUI辅助
* 作者：EthanCoco
* 博客：http://www.cnblogs.com/jianyeLee/
* 日期：2015-08-15
*/ //养成好的习惯，在写jQuery代码的时候，记得最好在前面加个“分号”
;$(function(){
//当点击class为a1的时候，执行 $('.ethan_success').dialog('open');把提示框打开，
// setTimeout（）是设置时间的
$('#ethan_dialog .a1').click(function(){ //当点击的时候，
$('.ethan_success').dialog('open'); //打开dialog对话框
setTimeout(function(){ //当时间为2秒的时候，关闭对话框，并跳转指定的页面
$('.ethan_success').dialog('close');
window.location.href='http://www.cnblogs.com/jianyeLee/';
},2000);
});
$('#ethan_dialog .a2').click(function(){
$('.ethan_loading').dialog('open');
setTimeout(function(){
$('.ethan_loading').dialog('close');
},2000);
});
$('#ethan_dialog .a3').click(function(){
$('.ethan_warning').dialog('open');
setTimeout(function(){
$('.ethan_warning').dialog('close');
},2000);
});
$('#ethan_dialog .a4').click(function(){
$('.ethan_error').dialog('open');
setTimeout(function(){
$('.ethan_error').dialog('close');
},2000);
}); /**
* @Description 初始化弹出对话框层
* @author EthanCoco
* @Date 2015-08-15
* @param className 样式名称（成功：ethan_success，加载：ethan_loading，警告：ethan_warning，失败：ethan_error）
*/
$('.ethan_success,.ethan_loading,.ethan_warning,.ethan_error').dialog({
autoOpen : false,
modal : true,
closeOnEscape : false,
resizable : false,
draggable : false,
hide: 'blind',
width : 200,
height : 100,
}).parent().find('.ui-widget-header').hide(); //这个parent().find('.ui-widget-header').hide();需要一点技巧，下面介绍一下 });
解析此行代码的意思：parent().find('.ui-widget-header').hide();
我们先把这行代码去掉，看看样式成了怎么样的：
看到这个一个close按钮在那里，是非常难看的，再说我们设置了time自动关闭，就不需要这个手动关闭按钮了，现在我们怎么去掉他呢，来看
我们在网页中：右键——审查元素，在网页下面如下显示，我们切换到Elements,如图：
然后我们用鼠标点击到弹出框，我们在下面会看到相应的颜色对应，
我们在下面找到提示框的button按钮close：如图
找到了他对应的close按钮，然后.parent()是他的父级，也就是第一个箭头所指的div，然后，find()他的class，那么多class，到底用哪个呢，其实都可以，然后hide()隐藏它，不要他就可以了；
这个模块的di本来是没有的 是通过jQueryUI在初始化dialog的时候加进去的。
所以有时候要改jQueryUI自带的样式，要学会如何找他，这是一个技巧，经常用的。
我的源码：
http://yunpan.cn/cd5zwNZmcY9vh （提取码：a7f7）
/*
*作者：EthanCoco
*2015-08-16 01:39:28
*邮箱：lijianlin0204@163.com
*/