打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
JS + DIV ===> 精美alert提示框
userphoto 关注

如果*.js出现乱码现象,可以把该*.js文件用记事本打开,然后另存为UTF-8格式的*.js文件即可.

Html代码
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <script type="text/javascript" >  
  5. <!--   
  6. function inpFun()   
  7. {   
  8.     var obje=function(){};   
  9.     obje.names='arguments from hosting.';   
  10.     var rtnVal=window.showModalDialog("a.htm",obje,"help=no;status=no;resizable=yes;scroll=no;center=yes;edge=sunken");   
  11.     alert(rtnVal);   
  12. }   
  13. -->  
  14. </script>  
  15. <script type="text/javascript" language="javascript">  
  16. <!--   
  17. function dragAB()   
  18. {   
  19.     alert("你可以拖动我吗？")   
  20. }   
  21. window.alert = function(txt)   
  22. {   
  23.     var shield = document.createElement("DIV");   
  24.     shield.id = "shield";   
  25.     shield.style.position = "absolute";   
  26.     shield.style.left = "0px";   
  27.     shield.style.top = "0px";   
  28.     shield.style.width = "100%";   
  29.     shield.style.height = "100%";   
  30.     shield.style.background = "#6600cc";   
  31.     shield.style.textAlign = "center";   
  32.     shield.style.zIndex = "10000";   
  33.     shield.style.filter = "alpha(opacity=0)";   
  34.     var alertFram = document.createElement("DIV");   
  35.     alertFram.id="alertFram";   
  36.     alertFram.style.position = "absolute";   
  37.     alertFram.style.right = "50%";   
  38.     alertFram.style.bottom = "50%";   
  39.     alertFram.style.marginRight = "-125px";   
  40.     alertFram.style.marginBottom = "-75px";   
  41.       
  42.     alertFram.style.width = "250px";   
  43.     alertFram.style.height = "150px";   
  44.     alertFram.style.background = "#000";   
  45.     alertFram.style.textAlign = "center";   
  46.     alertFram.style.lineHeight = "150px";   
  47.     alertFram.style.zIndex = "10002";   
  48.     strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";   
  49.     strHtml += "<li onmousedown=\"oMove(parentNode.parentNode);\" title=\"可移动提示框\" style=\"cursor:move;background:#002F9C;text-align:left;padding-left:5px;font-size:14px;font-weight:bold;color: #FFFFFF;height:25px;line-height:25px;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\">可移动提示框</li>\n";   
  50.     strHtml += "<li style=\"background:#5A7EDC;text-align:center;font-size:12px;color: #FFFFFF;height:120px;line-height:120px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\">"+txt+"</li>\n";   
  51.     strHtml += "<li style=\"background:#002F9C;text-align:center;font-weight:bold;height:25px;line-height:25px; border-left:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\"><input type=button value=' 确定 ' onclick=\"remove()\"></li>\n";   
  52.     strHtml += "</ul>\n";   
  53.     alertFram.innerHTML = strHtml;   
  54.     document.body.appendChild(alertFram);   
  55.     document.body.appendChild(shield);   
  56.     var c = 0;   
  57.     this.doAlpha = function()   
  58.     {   
  59.         if (c++ > 50){clearInterval(ad);return 0;}   
  60.         shield.style.filter = "alpha(opacity="+c+");";   
  61.     }   
  62.     this.remove=function()   
  63.     {   
  64.        shield.style.filter = "";   
  65.        shield.id = "";   
  66.        shield.style.position = "";   
  67.        shield.style.left = "";   
  68.        shield.style.top = "";   
  69.        shield.style.width = "";   
  70.        shield.style.height ="";   
  71.        shield.style.background = "";   
  72.        shield.style.textAlign = "";   
  73.        shield.style.zIndex = "";   
  74.        shield.style.filter = "";   
  75.        alertFram.innerHTML="";   
  76.        alertFram.id="";   
  77.        alertFram.style.position = "";   
  78.        alertFram.style.left = "";   
  79.        alertFram.style.top = "";   
  80.        alertFram.style.marginLeft = "";   
  81.        alertFram.style.marginTop = "";   
  82.        alertFram.style.width = "";   
  83.        alertFram.style.height = "";   
  84.        alertFram.style.background = "";   
  85.        alertFram.style.textAlign = "";   
  86.        alertFram.style.lineHeight = "";   
  87.        alertFram.style.zIndex = "";   
  88.     }   
  89.       
  90.     var ad = setInterval("doAlpha()",10);   
  91.     alertFram.focus();   
  92.     document.body.onselectstart = function(){return false;};   
  93. }   
  94. function oMove(obj)   
  95. {   
  96.     var otop,oleft;   
  97.     tag_1=true;   
  98.     otop = event.y - obj.offsetTop;   
  99.     oleft = event.x - obj.offsetLeft;   
  100.     obj.setCapture();   
  101.     obj.onmousemove = function()   
  102.     {   
  103.         if(tag_1)   
  104.         {   
  105.            obj.style.left = event.x - oleft;   
  106.            obj.style.top = event.y - otop;   
  107.         }   
  108.     }   
  109.     obj.onmouseup = function()   
  110.     {   
  111.        obj.onmouseup = null;   
  112.        obj.style.filter = null;   
  113.        tag_1=false;   
  114.        obj.releaseCapture();   
  115.     }   
  116. }   
  117. //-->  
  118. </script>  
  119. <script type="text/javascript" language="javascript">  
  120. <!--   
  121. //兼容IE,firefox                   
  122. function sAlert(txt)   
  123. {   
  124.     var eSrc=(document.all)?window.event.srcElement:arguments[1];   
  125.     var shield = document.createElement("DIV");   
  126.     shield.id = "shield";   
  127.     shield.style.position = "absolute";   
  128.     shield.style.left = "0px";   
  129.     shield.style.top = "0px";   
  130.     shield.style.width = "100%";   
  131.     shield.style.height = "100%"//document.body.scrollHeight+"px";   
  132.     shield.style.background = "#cc0066";   
  133.     shield.style.textAlign = "center";   
  134.     shield.style.zIndex = "770";   
  135.     shield.style.filter = "alpha(opacity=0)";   
  136.     shield.style.opacity = 0;   
  137.     var alertFram = document.createElement("DIV");   
  138.     alertFram.id="alertFram";   
  139.     alertFram.style.position = "absolute";   
  140.     alertFram.style.left = "50%";   
  141.     alertFram.style.top = "50%";   
  142.     alertFram.style.marginLeft = "-225px" ;   
  143.     alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";   
  144.     alertFram.style.width = "450px";   
  145.     alertFram.style.height = "150px";   
  146.     alertFram.style.background = "#ccc";   
  147.     alertFram.style.textAlign = "center";   
  148.     alertFram.style.lineHeight = "150px";   
  149.     alertFram.style.zIndex = "777";   
  150.     strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";   
  151.     strHtml += "    <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">Browser兼容提示框</li>\n";   
  152.     strHtml += "    <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";   
  153.     strHtml += "    <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk();\"/></li>\n";   
  154.     strHtml += "</ul>\n";   
  155.     alertFram.innerHTML = strHtml;   
  156.     document.body.appendChild(alertFram);   
  157.     document.body.appendChild(shield);   
  158.     this.setOpacity = function(obj,opacity)   
  159.     {   
  160.         if(opacity>=1)opacityopacity=opacity/100;   
  161.         try   
  162.         {   
  163.             obj.style.opacity=opacity;   
  164.         }   
  165.         catch(e)   
  166.         {}   
  167.         try   
  168.         {   
  169.             if(obj.filters.length>0&&obj.filters("alpha"))   
  170.             {   
  171.                 obj.filters("alpha").opacity=opacity*100;   
  172.             }   
  173.             else   
  174.             {   
  175.                 obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";   
  176.             }   
  177.         }   
  178.         catch(e)   
  179.         {}   
  180.     }   
  181.     var c = 0;   
  182.     this.doAlpha = function()   
  183.     {   
  184.         if (++c > 20)   
  185.         {   
  186.             clearInterval(ad);   
  187.             return 0;   
  188.         }   
  189.         setOpacity(shield,c);   
  190.     }   
  191.     var ad = setInterval("doAlpha()",1);   
  192.     this.doOk = function()   
  193.     {   
  194.         //alertFram.style.display = "none";   
  195.         //shield.style.display = "none";   
  196.         document.body.removeChild(alertFram);   
  197.         document.body.removeChild(shield);   
  198.         eSrc.focus();   
  199.         document.body.onselectstart = function(){return true;}   
  200.         document.body.oncontextmenu = function(){return true;}   
  201.     }   
  202.     document.getElementById("do_OK").focus();   
  203.     eSrc.blur();   
  204.     document.body.onselectstart = function(){return false;}   
  205.     document.body.oncontextmenu = function(){return false;}   
  206. }   
  207. -->  
  208. </script>  
  209. </head>  
  210. <body>  
  211. <p>  
  212. <input type="button" name="cry" value="运行可拖动提示框" onclick="dragAB();"/>  
  213. </p>  
  214. <p>  
  215. <input type="button" name="btn_1" value="兼容IE,firefox提示框" onclick="sAlert('兼容IE,firefox')" />  
  216. </p>  
  217. </body>  
  218. </html>  
 

 

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。
打开APP，阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序，算一算2024你的财运
立体表格（装饰个人首页使用）
下拉列表-select样式css处理，可改变箭头的颜色
前端css实现最基本的时间轴
单页导航源码借鉴
网页螺旋特效显示-网页特效
qq式的菜单
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权！
如果VIP功能使用有故障，
可点击这里联系客服！

联系客服