四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

  1. 云栖社区>
  2. 博客>
  3. 正文

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

杰克.陈 2015-08-17 08:40:00 浏览732
展开阅读全文
原文:四种常见的提示弹出框(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="images/success.png" class="ethan_img">
</div>
<div class="ethan_loading">
<span>内容加载</span><br/>
<img src="images/loading.gif" class="ethan_img">
</div>
<div class="ethan_warning">
<span>输入有误</span><br/>
<img src="images/warning.png" class="ethan_img">
</div>
<div class="ethan_error">
<span>更新失败</span><br/>
<img src="images/error.png" class="ethan_img">
</div>
</body>
</html>

 

 第二步:编写css文件

html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.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

*/

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注