zoukankan      html  css  js  c++  java
  • [转]改善用户体验的alert提示效果


    <input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>&copy; 2006');" />

    <script type="text/javascript" language="javascript">
    //Author:Daviv
    //Blog:http://blog.163.com/jxdawei
    //Date:2006-10-28
    //Email:jxdawei@gmail.com
                function sAlert(str){
                var msgw,msgh,bordercolor;
                msgw=400;//提示窗口的宽度
                msgh=100;//提示窗口的高度
                bordercolor="#336699";//提示窗口的边框颜色
                titlecolor="#99CCFF";//提示窗口的标题颜色
               
                var sWidth,sHeight;
                sWidth=document.body.offsetWidth;
                sHeight=document.body.offsetHeight;
               

                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";
                document.body.appendChild(bgObj);
                var msgObj=document.createElement("div")
                msgObj.setAttribute("id","msgDiv");
                msgObj.setAttribute("align","center");
                msgObj.style.position="absolute";
                msgObj.style.background="white";
                msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
                msgObj.style.border="1px solid " + bordercolor;
                msgObj.style.width=msgw + "px";
                msgObj.style.height=msgh + "px";
              msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
              msgObj.style.left=(sWidth-msgw)/2 + "px";
              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);
          }
            </script>

  • 相关阅读:
    git回滚分支版本到指定版本
    java的垃圾回收
    java对象模型
    java内存模型
    偏向锁浅析
    maven打包报错:在类路径或引导类路径中找不到程序包 java.lang
    《microsoft sql server 2008技术内幕 t-sql语言基础》
    《SQL基础教程》
    内连接,外链接(左连接、右连接、全连接),交叉连接大总结+附SQL JOINS图解[转]
    《大型网站技术架构》1.大型网站架构演练
  • 原文地址:https://www.cnblogs.com/lark/p/958323.html
Copyright © 2011-2022 走看看