Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Änderung des Warnungsstils in JavaScript

Einführung in die Änderung des Warnungsstils in JavaScript

黄舟
黄舟Original
2017-11-20 10:15:495238Durchsuche

In unserem vorherigen Artikel haben wir Ihnen eine detaillierte Erklärung der Verwendung von Alert() in JavaScript vorgestellt. Wir alle wissen, dass Alert() in JavaScript ein Meldungsdialogfeld und das Warnmeldungsdialogfeld öffnet Wird normalerweise für einige Benutzeraufforderungsinformationen verwendet. Sein Stil war schon immer der Standard. Kann ich seinen Stil ändern? Heute werde ich Ihnen beibringen, wie Sie den Benachrichtigungsstil in JavaScript ändern!

Einführung in die Methode zum Ändern des Benachrichtigungsstils mithilfe von 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>

Zusammenfassung:

Nachdem wir diesen Artikel studiert und verstanden haben, können wir sehen, dass der Stil von warning() in JavaScript geändert werden kann. Wenn Sie bei der Arbeit darauf stoßen, können Sie aus diesem Artikel lernen !

Verwandte Empfehlungen:

Anleitung zur Verwendung von alarm() in JavaScript


Detaillierte Erläuterung des Popup-Fensters der Funktion „alert()“, Testtechniken und Verwendung der Ausgabe von Warnungen in JavaScript


Der Unterschied zwischen alarm() und console.log() in Javascript

Das obige ist der detaillierte Inhalt vonEinführung in die Änderung des Warnungsstils in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:JS-Imitations-Chat-SeiteNächster Artikel:JS-Imitations-Chat-Seite