zoukankan      html  css  js  c++  java
  • 改善用户体验之Alert提示效果

    功能:替换传统弹出窗口提示 window.alert("");

    好处:界面美观,友善(最起码没有系统报警的声音)。
       引用方便,纯js脚本文件实现所有效果。

    使用方法:

    <!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" xml:lang="zh-CN" lang="zh-CN">
        <head>
            <title>Alert提示效果脚本</title>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <meta http-equiv="Content-Language" content="gb2312" />
            <meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
            <meta name="description" content="电力工程造价信息" />
            <script type="text/javascript" src="alert.js"></script>
            <style type="text/css">
                *{}{
                    margin:0;padding:0;
                }
            </style>
        </head>
        <body>
        

        <div class="cecmbody" id="cecmpolicy">
            <div class="leftClass">
                <p>测试</p><p>测试</p><p>测试</p>
                <p>测试</p><p>测试</p><p>测试</p>
                <p>测试</p><p>测试</p><p>测试</p>
                <input type="button" value="点击这里" onclick="sAlert('测试效果');" />
                <p>测试</p><p>测试</p><p>测试</p>
                <p>测试</p><p>测试</p><p>测试</p>
                <p>测试</p><p>测试</p><p>测试</p>
            </div>
            <div class="rightClass">
            </div>    
        </div>
        </body>
    </html>
    脚本文件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.style.overflow = "hidden";
               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);
                }



  • 相关阅读:
    centos 用户指定目录访问
    centos FTP 用户指定目录禁用上级目录
    centos下SVN搭建多个库文件总汇
    listview点击checkbox,修改值
    C#转成时间格式
    nmap 查看主机上开放的端口
    xargs、管道、exec区别
    OSI七层模型,作用及其对应的协议
    linux面试题(重点)
    数据库备份还原 mysqldump
  • 原文地址:https://www.cnblogs.com/Bany/p/1755510.html
Copyright © 2011-2022 走看看