zoukankan      html  css  js  c++  java
  • 改善用户体验之alert提示效果[转] 碧血黄沙

    如同Lightbox的效果那边,或者说和Windows关闭系统前的那一刻类似,为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。


    程序代码:(您可以把以下代码保存成html文件看看效果)  

    <!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("需要提示的信息")

    转自:天牢囚犯'S BLOG
    新站上线--咱地里 www.zandili.com 科技博客
  • 相关阅读:
    Linux内核RPC请求过程
    二分图
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 文本加密
    Java实现 蓝桥杯 算法提高 文本加密
    Java蓝桥杯 算法提高 九宫格
    Java蓝桥杯 算法提高 九宫格
  • 原文地址:https://www.cnblogs.com/airfey/p/603073.html
Copyright © 2011-2022 走看看