问答详情
源自：2-2 JavaScript-警告（alert 消息对话框）

如何修改alert样式? 漂亮的弹窗

这样alret 弹出的窗口 都是游览器自带的样式。太丑了！！！！ 我们在做的时候，经理都要求把这个做的美观一些。 怎么做才能做出好看的弹窗呢？ JS初级小白  跪求大神教我 。

提问者：樱花100 2017-01-19 16:41

个回答

  • 慕尼黑9128539
    2018-08-16 11:49:35

    window.alert = function(str) 
    { 
    var shield = document.createElement("DIV"); 
    shield.id = "shield"; 
    shield.style.position = "absolute"; 
    shield.style.left = "0px"; 
    shield.style.top = "0px"; 
    shield.style.width = "100%"; 
    shield.style.height = document.body.scrollHeight+"px"; 
    //弹出对话框时的背景颜色 
    shield.style.background = "#fff"; 
    shield.style.textAlign = "center"; 
    shield.style.zIndex = "25"; 
    //背景透明 IE有效 
    //shield.style.filter = "alpha(opacity=0)"; 
    var alertFram = document.createElement("DIV"); 
    alertFram.id="alertFram"; 
    alertFram.style.position = "absolute"; 
    alertFram.style.left = "50%"; 
    alertFram.style.top = "50%"; 
    alertFram.style.marginLeft = "-225px"; 
    alertFram.style.marginTop = "-75px"; 
    alertFram.style.width = "450px"; 
    alertFram.style.height = "150px"; 
    alertFram.style.background = "#ff0000"; 
    alertFram.style.textAlign = "center"; 
    alertFram.style.lineHeight = "150px"; 
    alertFram.style.zIndex = "300"; 
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; 
    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;\">[自定义提示]</li>\n"; 
    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;\">"+str+"</li>\n"; 
    strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n"; 
    strHtml += "</ul>\n"; 
    alertFram.innerHTML = strHtml; 
    document.body.appendChild(alertFram); 
    document.body.appendChild(shield); 
    var ad = setInterval("doAlpha()",5); 
    this.doOk = function(){ 
    alertFram.style.display = "none"; 
    shield.style.display = "none"; 
    } 
    alertFram.focus(); 
    document.body.onselectstart = function(){return false;}; 
    }


    0
  • Russian_Achilles
    2018-05-28 11:00:09

    不需要美观，那要那么多前端，什么客户体验做什么，简单的傻大粗！

    0
  • perry在路上
    2017-04-05 15:01:33

    个人认为  ：一个警告窗口  无需美观  最主要的实现功能就好  

    0
  • weibo_东璃沫_0
    2017-03-14 16:41:12

    请问，是否已经解决？

    0
  • 樱花100
    2017-01-20 14:07:03

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>alert</title>

      <script type="text/javascript">

      alert:function(msg){  

       this.show({buttons:{yes:'确认'},msg:msg,title:'消息'});  

     },  

     confirm:function(msg,fn){  

       //fn为回调函数，参数和show方法的一致  

       this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});  

     },

     function rec(){

        var mychar="I love JavaScript";

       alert(mychar);

      }

      </script>

    </head>

    <body>

          <input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />

    </body>

    </body>

    </html>

    我放进去了 但是显示不出来

    0
  • Damons
    2017-01-19 17:14:30

    alert:function(msg){  
   this.show({buttons:{yes:'确认'},msg:msg,title:'消息'});  
 },  
 confirm:function(msg,fn){  
   //fn为回调函数，参数和show方法的一致  
   this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});  
 },


    0