Maison > interface Web > js tutoriel > le corps du texte

Introduction à la modification du style d'alerte en JavaScript

黄舟
Libérer: 2017-11-20 10:15:49
original
5247 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal