asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
页上的应用,对于用户来说。下边的图示是非常熟悉也极其厌恶的一种方式,特别是当用户正戴着耳机的时候,一声刺耳的报警。让用户感到非常的不爽。(截了这张图,是因为我讨厌这里的博客没有UBB帖代码功能,让我一帖脚本代码就报警,非常不爽)

 

大家细心就会发现,为了改善用户体验,各大门户网站都在极力避免上图的提示方式。如新浪邮箱采用的这种提示方式我比较喜欢,无聊就来研究了一下。

 

实现原理:

 

在body也就是网页的内容之上增加二个Div标签,一个用于设置背景变暗的效果,把下边的内容挡住.另一个当然就是大家看到的提示窗口.

 

实现方法:

先说用来挡住网页内容的层.

设置它的宽度满屏,高度满屏.背景设Gray(暗灰色).

重点在于设置他的透明度.这一点上Internet Explorer 与 Firefox 有所不同.所以在设置时要考虑浏览器的兼容性.IE里直接设置滤镜Filter:Alpha的值即可,而Firefox中则要设置opacity.这样背景层就实现了.

 

再说上边的提示窗口.

这个窗口的重点是让他浮于上边的背景层之上.用z-index属性即可设置.

要让窗口的位置居中,用document.body.offsetHeight & document.body.offsetWidth 以及窗口本身的宽度高度等值来计算位置即可.

 

 

由于这里不方便帖代码,有兴趣的朋友可以看我在蓝色经典发的帖子.做了一个纯JS文件实现的这样一个功能.

帖子地址:改善用户体验之alert提示效果

 

下载js脚本文件后,在需要提示的页面只需要先转入该脚本文件,以下是脚本文件代码

 

alert.js


   /*
   作者:Daviv
   博客:http://blog.163.com/jxdawei
   时间:2006-10-27
   感谢:wenming (Blueidea)
   
   功能:弹出提示
   方法:调用sAlert("您要弹出的信息");   
   
   */
   
   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色
   
   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;
   sHeight=document.body.offsetHeight;
   if (sHeight<screen.height)
   {
    sHeight=screen.height;
   }

   var bgObj=document.createElement("div");
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#777";
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
   bgObj.style.opacity="0.6";
   bgObj.style.left="0";
   bgObj.style.width=sWidth + "px";
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";
   document.body.appendChild(bgObj);
   
   var msgObj=document.createElement("div")
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="white";
   msgObj.style.border="1px solid " + bordercolor;
      msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight = (msgh-titleheight) + "px";
            msgObj.style.zIndex = "10001";
  
     var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     title.style.margin="0";
     title.style.padding="3px";
     title.style.background=bordercolor;
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="0.75";
     title.style.border="1px solid " + bordercolor;
     title.style.height="18px";
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
     title.style.color="white";
     title.style.cursor="pointer";
     title.innerHTML="关闭";
     title.onclick=function(){
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }


 

然后在其它需要提示的地方直接写

sAlert("需要提示的信息");

发布者: Goingmm | 时间:10月29日 21:37
效果还不错,有几点建议 1) 弹出框的样式最好能以参数的形式传进来。提示信息的文字数量不定。这样可以调整边框的显示大小,以达到最好的效果 function sAlert(msg,msgw,msgh,titleheight,bordercolor,titlecolor) { if(!msg) msg = "-请传入你需要提示的信息."; if(!msgw) msgw = 350; if(!msgh) msgh = 80; if(!titleheight) titleheight = 25; if(!bordercolor) bordercolor = "#336699"; if(!titlecolor) titlecolor = "#99CCFF"; .......................... } 2) 用户点title区域的时候,弹出框自动关闭。这样做也没什么问题。但是少了几分友好的交互。 如果没看清楚是不是需要重现一次提示呢?显然没必要 对吧? 建议修改方案:点“关闭”区域的时候才做关闭,title其他区域提供拖动功能(这个拖动不用保存位置参数) 因为用户可能会边玩边看
posted on 2006-11-22 16:09 汪杰 阅读(429) 评论(0)  编辑 收藏 引用 所属分类: javascript
只有注册用户登录后才能发表评论。

<2019年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 384849
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜