js弹窗代码:用户体验极佳的Alert提示效果

摘要分享一款用户体验极佳的Alert弹出窗口提示效果(附详细js弹窗代码并提供下载),注意,小拼提供的这种Alert窗口效果区别于蓝色理想、懒人图库的版本,实现原理也不一样,而且那种效果也太弱了。

是不是受够了系统自带地Alert提示效果?生硬的灰,还带有浓重地警告意味地弹出窗口,着实让人厌烦。站在用户体验地角度,这种弹窗效果是应该被抹杀地,怎么说也得让它看起来漂亮、舒服一些吧?事实上,Javascript可以改变这一切——重构Alert提示框,改善用户体验,实现多元化地窗口特效。下面,小拼就分享下这种对用户非常友好地Alert提示效果,而且还可以加上表情图片,很有趣吧:-)

用户体验极佳的Alert提示效果

首先,我们用js写一个重构Alert提示框的NewAlertBox()函数,重要的地方小拼都加了注释,应该好懂吧?弹窗代码如下:

/*
 js弹窗代码:用户体验极佳的Alert提示效果
 pubdate:2011-05-26 10:15
 e-mail:xpsem2010@gmail.com
 source:小拼SEM博客
*/

//获取指定ID的元素
function $xp(id) {
	return document.getElementById(id);
}
//通用事件获取接口
function getEvent()
{
	if(CheckBrowser()=='IE')  return window.event;
	func=getEvent.caller;
	while(func!=null)
	{
		var arg0 = func.arguments[0];
		if(arg0)
		{
			if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
			|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
			{
				return arg0;
			}
		}
		func=func.caller;
	}
	return null;
}

//alert
function NewAlertBox(msg, time){//time为消失时间
	var msgbg,msgcolor,bordercolor,content,posLeft,posTop;
	//弹出窗口设置
	msgbg = "#FFF";			//内容背景
	msgcolor = "#000";		//内容颜色
	bordercolor = "#ccc"; 	//边框颜色
	//遮罩背景设置
	content = "这里是表情图片地址(HTML格式)" + msg;
	var sWidth,sHeight;
	sWidth = screen.availWidth - 20;//防止溢出
	if(screen.availHeight > document.body.scrollHeight){
		sHeight = screen.availHeight;	//少于一屏
	}else{
		sHeight = document.body.scrollHeight;	//多于一屏
	}
	//创建遮罩背景
	var maskObj = document.createElement("div");
	maskObj.setAttribute('id','maskdiv');
	maskObj.style.position = "absolute";
	maskObj.style.top = "0";
	maskObj.style.left = "0";
	maskObj.style.background = "#fff";
	maskObj.style.filter = "Alpha(opacity=40);";
	maskObj.style.opacity = "0.4";
	maskObj.style.width = sWidth + "px";
	maskObj.style.height = sHeight + "px";
	maskObj.style.zIndex = "10000";
	document.body.appendChild(maskObj);
	//创建弹出窗口
	var msgObj = document.createElement("div")
	msgObj.setAttribute("id","msgdiv");
	msgObj.style.position ="absolute";
	var event = getEvent();//申明event
	if(CheckBrowser()=='IE')
	{
		posLeft = event.clientX + 10;
		posTop = event.clientY + document.documentElement.scrollTop;
	}
	else
	{
		posLeft = event.pageX + 10 + "px";//ff下要申明px
		posTop = event.pageY + 10 + "px";
	}
	msgObj.style.top = posTop;
	msgObj.style.left = posLeft;
	msgObj.style.fontSize = "12px";
	msgObj.style.background = msgbg;
	msgObj.style.border = "1px solid " + bordercolor;
	msgObj.style.zIndex = "10001";
	//创建内容
	var bodyObj = document.createElement("div");
	bodyObj.setAttribute("id","msgbody");
	bodyObj.style.padding = "10px";
	bodyObj.style.lineHeight = "1.5em";
	//var txt = document.createTextNode(content);
	//bodyObj.appendChild(txt);
	bodyObj.innerHTML = content;
	//生成窗口
	document.body.appendChild(msgObj);
	$xp("msgdiv").appendChild(bodyObj);
	if(time != '') setTimeout("CloseMsg()",time);
	else setTimeout("CloseMsg()",2000);//默认两秒后自动消失
	return false;
}
//移除对象
function CloseMsg(){
	document.body.removeChild($xp("maskdiv"));
	$xp("msgdiv").removeChild($xp("msgbody"));
	document.body.removeChild($xp("msgdiv"));
}

//判断浏览器类型
function CheckBrowser(){
    var cb = "Unknown";
    if(window.ActiveXObject){
        cb = "IE";
    }else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
        cb = "Firefox";
    }else if((typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined")){
        cb = "Mozilla";
    }else if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){
        cb = "Opera";
    }
    return cb;
}

接下来,将上面的js代码封装起来,比如放到xp-dialog.js中,然后在需要使用Alert提示效果的网页引入这个js文件,如下;

最后,在Alert提示框出现的位置引用NewAlertBox()函数,例如:

onClick="NewAlertBox('测试Alert提示效果',3000);"

怎么样?这种js的Alert弹出窗口还不错吧?!小拼提供的这种Alert提示效果区别于蓝色理想、懒人图库的版本,实现原理也不一样,而且那种效果也太弱了。

附:Alert提示效果完整版下载

小提示:如果你是个js控,你还可以在它的基础上继续延伸,并把你的研究成果分享给更多的人……

好了,关于这种有利于用户体验的Alert提示效果就介绍到这里,希望能对你有所帮助。唉,还是罗嗦一下吧,该js弹窗特效是小拼折腾了好久才弄出来的,如果你有转载的兴趣,请注明原文出处并保留链接,小拼将不盛感激:-)

目前留言:1   其中:访客:1   博主:0

  1. xbm376

    效果不错,学习一下!-_-

评论加载中...

给我留言

图片 表情