小虎博客

A-A+

div模仿js中alert提示效果

2016年10月13日 编程技术 暂无评论

我们如果使用js中alert提示效果，那是难看又吓人啊，经常会响一下然后再弹出一个对话框，下面我来利用js模仿出一个alert提示效果有需要的朋友可参考。

先来看js alert(),代码如下:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function message()  
  5. { //xiaohuboke.com  
  6. alert("该提示框是通过 onload 事件调用的。")  
  7. }  
  8. </script>  
  9. </head>  
  10. <body onload="message()">  
  11. </body>  
  12. </html>  

注：alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作.

下面看一个模仿代码,代码如下:

  1. <input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>&copy; 
  2. 2006');" />  
  3. <script type="text/javascript" language="javascript">  
  4.             function sAlert(str){  
  5.             var msgw,msgh,bordercolor;  
  6.             msgw=400;//提示窗口的宽度  
  7.             msgh=100;//提示窗口的高度  
  8.             bordercolor="#336699";//提示窗口的边框颜色  
  9.             titlecolor="#99CCFF";//提示窗口的标题颜色  
  10.               
  11.             var sWidth,sHeight;  
  12.             sWidth=document.body.offsetWidth;  
  13.             sHeight=document.body.offsetHeight;  
  14.              
  15.             var bgObj=document.createElement("div");  
  16.             bgObj.setAttribute('id','bgDiv');  
  17.             bgObj.style.position="absolute";  
  18.             bgObj.style.top="0";  
  19.             bgObj.style.background="#777";  
  20.             bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha 
  21. (style=3,opacity=25,finishOpacity=75";  
  22.             bgObj.style.opacity="0.6";  
  23.             bgObj.style.left="0";  
  24.             bgObj.style.width=sWidth + "px";  
  25.             bgObj.style.height=sHeight + "px";  
  26.             document.body.appendChild(bgObj);  
  27.             var msgObj=document.createElement("div")  
  28.             msgObj.setAttribute("id","msgDiv");  
  29.             msgObj.setAttribute("align","center");  
  30.             msgObj.style.position="absolute";  
  31.             msgObj.style.background="white";  
  32.             msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
  33.             msgObj.style.border="1px solid " + bordercolor;  
  34.             msgObj.style.width=msgw + "px";  
  35.             msgObj.style.height=msgh + "px";  
  36.           msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";  
  37.           msgObj.style.left=(sWidth-msgw)/2 + "px";  
  38.           var title=document.createElement("h4");  
  39.           title.setAttribute("id","msgTitle");  
  40.           title.setAttribute("align","right");  
  41.           title.style.margin="0";  
  42.           title.style.padding="3px";  
  43.           title.style.background=bordercolor;  
  44.           title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, 
  45. finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";  
  46.           title.style.opacity="0.75";  
  47.           title.style.border="1px solid " + bordercolor;  
  48.           title.style.height="18px";  
  49.           title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
  50.           title.style.color="white";  
  51.           title.style.cursor="pointer";  
  52.           title.innerHTML="关闭";  
  53.           title.onclick=function(){  
  54.             document.body.removeChild(bgObj);  
  55.         document.getElementById("msgDiv").removeChild(title);  
  56.         document.body.removeChild(msgObj);  
  57.         }  
  58.           document.body.appendChild(msgObj);  
  59.           document.getElementById("msgDiv").appendChild(title);  
  60.           var txt=document.createElement("p");  
  61.           txt.style.margin="1em 0"  
  62.           txt.setAttribute("id","msgTxt");  
  63.           txt.innerHTML=str;  
  64.       document.getElementById("msgDiv").appendChild(txt);  
  65.       } //xiaohuboke.com  
  66. </script>  
标签：

给我留言