Introduction to how to modify alert style in JavaScript-JS Tutorial-php.cn

Introduction to how to modify alert style in JavaScript

黄舟

Release： 2017-11-20 10:15:49

Original

5251 people have browsed it

In our previous article, we introduced to you a detailed explanation of the use of alert() in JavaScript. We all know that alert() in JavaScript pops up a message dialog box, and the alert message dialog box is usually used for some For the user's prompt information, his style has always been the default, so can I modify his style? Today I will teach you how to modify the alert style in JavaScript!

Introduction to the method of modifying alert style in JavaScript

<script language="javascript" type="text/javascript">
    window.alert = function(txt)
    {
     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 = "#333";
     shield.style.textAlign = "center";
     shield.style.zIndex = "10000";
     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 = "#ccc";
     alertFram.style.textAlign = "center";
     alertFram.style.lineHeight = "150px";
     alertFram.style.zIndex = "10001";
     strHtml = "<ul style="list-style:none;margin:0px;padding:0px;width:100%"> ";
     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> ";
     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> ";
     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> ";
     strHtml += "</ul> ";
     alertFram.innerHTML = strHtml;
     document.body.appendChild(alertFram);
     document.body.appendChild(shield);
     var c = 0;
     this.doAlpha = function(){
         if (c++ > 20){clearInterval(ad);return 0;}
         shield.style.filter = "alpha(opacity="+c+");";
     }
     var ad = setInterval("doAlpha()",5);
     this.doOk = function(){
         alertFram.style.display = "none";
         shield.style.display = "none";
     }
     alertFram.focus();
     document.body.onselectstart = function(){return false;};
    }
</script>

Copy after login

Summary:

Learn from this article And understanding, we can see that the style of alert() in JavaScript can be modified. Friends, if you encounter it at work, you can learn from this article. I hope it will be helpful to you!

Related recommendations:

Instructions for using alert() in JavaScript

The alert() function in JavaScript pops up, testing techniques, and detailed instructions for issuing warnings

The difference between alert() and console.log() in javascript

The above is the detailed content of Introduction to how to modify alert style in JavaScript. For more information, please follow other related articles on the PHP Chinese website!