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);
                }



  • 相关阅读:
    Java实现 蓝桥杯 算法训练 画图(暴力)
    Java实现 蓝桥杯 算法训练 画图(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 Cowboys
    Java实现 蓝桥杯 算法训练 Cowboys
    55. Jump Game
    54. Spiral Matrix
    50. Pow(x, n)
  • 原文地址:https://www.cnblogs.com/Bany/p/1755510.html
Copyright © 2011-2022 走看看