Introduction à la modification du style d'alerte en JavaScript

Dans notre article précédent, nous vous avons présenté une explication détaillée de l'utilisation de alert() en JavaScriptNous savons tous qu'alert() en JavaScript fait apparaître une boîte de dialogue de message et la boîte de dialogue de message d'alerte. est généralement utilisé pour certains Pour l'information rapide de l'utilisateur, son style a toujours été celui par défaut, puis-je modifier son style Aujourd'hui, je vais vous apprendre à modifier le style d'alerte en JavaScript !

Introduction à la méthode de modification du style d'alerte à l'aide de 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>

Résumé :

Par Après avoir étudié et compris cet article, nous pouvons voir que le style de alert() en JavaScript peut être modifié. Amis, si vous le rencontrez au travail, vous pourrez apprendre de cet article, j'espère qu'il vous sera utile. !

Recommandations associées :

Instructions d'utilisation de alert() en JavaScript

Explication détaillée de la fenêtre contextuelle de la fonction alert(), des techniques de test et de l'utilisation de l'émission d'alertes en JavaScript

La différence entre alert() et console.log() en javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!