Js는 자신만의 AlertBox(정보 프롬프트 상자)_javascript 기술을 사용자 정의합니다.

이 기사에서는 사용자 정의 AlertBox를 생성합니다.

js 파일에 다음 코드를 삽입합니다.

복사합니다. code 코드는 다음과 같습니다.

// JScript 파일
// 경고 제목과 버튼 텍스트를 정의하는 상수
var. ALERT_TITLE = "죄송합니다!"; var ALERT_BUTTON_TEXT = "Close";
// 최신 브라우저인 경우에만 경고 방법을 재정의합니다.
//
(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
// 단축키 참조 문서 객체
d = document;
// modalContainer 객체가 DOM에 이미 존재하는 경우
if(d.getElementById("modalContainer")) return; modalContainer div를 BODY 요소의 하위 요소로 생성합니다.
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"))
mObj.id = "modalContainer" ;
// 페이지의 모든 콘텐츠를 오버레이하는 데 필요한 높이인지 확인하세요.
mObj.style.height = document.documentElement.scrollHeight "px"// DIV를 만듭니다. 이는 경고입니다.
AlertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox"
// MSIE는 position:fixed를 올바르게 처리하지 않습니다. 따라서 이는 경고
if(d.all && !window.opera) AlertObj.style.top = document.documentElement.scrollTop "px"
// 경고 상자 중앙에
alertObj를 배치하는 것을 보상합니다. style.left = (d.documentElement.scrollWidth - AlertObj.offsetWidth)/2 "px";
// 제목 표시줄로 H1 요소 생성
h1 = AlertObj.appendChild(d.createElement("h1" ));
h1.appendChild( d.createTextNode(ALERT_TITLE));
// txt 인수를 포함하는 단락 요소 생성
msg = AlertObj.appendChild(d.createElement("p")) ;
msg.innerHTML = txt;
// 확인 버튼으로 사용할 앵커 요소를 만듭니다.
btn = AlertObj.appendChild(d.createElement("a")); id = "closeBtn";
btn .appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#"
// 앵커가 있을 때 경고를 제거하도록 설정 clicked
btn.onclick = function( ) { RemoveCustomAlert();return false }
// DOM 함수에서 맞춤 알림을 제거합니다. RemoveCustomAlert() {
// document.getElementsByTagName("body") [0].removeChild(document.getElementById( "modalContainer"));
}
// DOM에서 사용자 정의 경고를 제거합니다.
removeCustomAlert()
{
document.getElementsByTagName( "body")[0].removeChild( document.getElementById("modalContainer"));
}



다음 코드를 HTML의 HEAD 섹션에 붙여넣습니다.

코드 복사

코드는 다음과 같습니다.