龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

div+js实现alert弹出提示框效果

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
Javascript可以改变这一切――重构Alert提示框,改善用户体验,实现多元化地窗口特效 首先,我们用js写一个重构Alert提示框的NewAlertBox()函数,重要的地方小拼都加了注释,应该好懂吧?
Javascript可以改变这一切――重构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);"

收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!
按钮 内容不能为空!
立刻说两句吧! 查看0条评论
精彩图集

赞助商链接