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

    <!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= ... sp;lang="zh-CN">
        <head>
            <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
            <title>
                政策文件_中国电力工程造价信息网</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="电力工程造价信息" />
            <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><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><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><p>测试</p><p>测试</p><p>测试</p>
                <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
                            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

            </div>
            <div class="rightClass">
            </div>    
        </div>
                    <script type="text/javascript" language="javascript">
                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;

                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);
                }
            </script>
        </body>
    </html>




    使用方法很简单,在需要弹出提示的页面先
    <script type="text/javascript" src="alert.js"></script>


    然后直接在需要提出处使用:
    sAlert("需要提示的信息")
  • 相关阅读:
    [rrdtool]监控和自己主动绘图,简单的监控.md
    64位Windows操作系统中的注冊表
    (转载)正向代理与反向代理的区别
    (转载)数据库表分割技术浅析(水平分割/垂直分割/库表散列)
    JavaWeb学习总结(四十九)——简单模拟Sping MVC
    JNDI学习总结(三)——Tomcat下使用Druid配置JNDI数据源
    JNDI学习总结(二)——Tomcat下使用C3P0配置JNDI数据源
    JNDI学习总结(一)——JNDI数据源的配置
    哈佛图书馆墙上的训言
    少走弯路的10条忠告
  • 原文地址:https://www.cnblogs.com/MaxIE/p/549253.html
Copyright © 2011-2022 走看看