JavaScript에서 경고 스타일을 수정하는 방법 소개

이전 글에서는 JavaScript에서 Alert()를 사용하는 방법에 대해 자세히 소개했습니다. JavaScript의 Alert()는 메시지 대화 상자를 띄우는데, 일반적으로 경고 메시지 대화 상자를 사용한다는 것은 모두가 알고 있는 사실입니다. 사용자에게 프롬프트 정보를 제공하기 위해 스타일이 항상 기본값이었는데 스타일을 수정할 수 있나요? 오늘은 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>

요약:

이 글을 공부하고 이해하면 자바스크립트의 알림() 스타일을 수정할 수 있음을 알 수 있습니다. , 일하고 계시다면 이 글을 통해 배울 수 있으니 도움이 되셨으면 좋겠습니다!

관련 권장 사항:

JavaScript

JavaScript의 Alert() 함수 팝업, 테스트 기술 및 발행 방법에 대한 자세한 설명 an warning

javascript

에서 Alert()와 console.log()의 차이점

위 내용은 JavaScript에서 경고 스타일을 수정하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!