^{<rp id="vnqod"></rp>}

用javascript實現改善用戶體驗之alert提示效果

2019-11-21 01:53:59

字體：大中小

來源：轉載

供稿：網友

類似于新浪郵箱的提示效果。比較獨立。在wenming版主的幫助下，已解決了高度不能適應的BUG。使用方法很簡單，在需要彈出提示的頁面先引用alert.js腳本文件,如:
程序代碼
<script type="text/javascript" src="alert.js"></script>
然后直接在需要提出處使用：
程序代碼
sAlert("需要提示的信息");
即可.不需要額外添加HTML代碼.
完整代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">     <head>         <title>             武林網</title>         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />         <meta http-equiv="Content-Language" content="gb2312" />         <style type="text/css">             *{                 margin:0;padding:0;             }         </style>     </head>     <body>          <div   id="iwvjtn8m0"   class="cecmbody" id="cecmpolicy">         <div   id="iwvjtn8m0"   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>             <input type="button" value="點擊這里" onclick="sAlert('測試效果');" />                  </div>         <div   id="iwvjtn8m0"   class="rightClass">         </div>         </div>                 <script type="text/javascript" language="javascript"> //Author:Daviv //Blog:<a href="http://blog.163.com/<a  target="_blank">jxdawei</a>" target="_blank">http://blog.163.com/<a  target="_blank">jxdawei</a></a> //Date:2006-10-27 //Email:<a  target="_blank">jxdawei</a>@gmail.com             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=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 ="25px";             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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：幾個不錯的自動收縮菜單導航效果

下一篇：用javascript實現代替marquee的滾動字幕效果代碼