자바스크립트로 구현된 팝업 레이어의 배경이 회색으로 표시됩니다. - 시뮬레이션(easyui 대화 상자)

페이지가 다소 보기 흉하고 기능만 구현되어 있습니다. ^ ^

다음과 같이 코드 코드를 복사합니다.

<title>easyui 대화상자 효과 모방</title>

<스크립트>

//페이지 요소 가져오기

var getElement = 함수() {

return document.getElementById(arguments[0]) || false;

}

함수 openDialog(dialogId) {

var MaskId = "마스크";

//있는 경우 원본을 먼저 삭제합니다.

if (getElement(dialogId)) {

document.removeChild(getElement(dialogId));//삭제 작업: 팝업 div

}

if(getElement(maskId)) {

document.removeChild(getElement(maskId));//삭제 작업: 팝업 작동 불가(마스크) 레이어

}

//배경이 회색으로 변합니다.

var MaskDiv = document.createElement("div");

MaskDiv.id = 마스크Id;

MaskDiv.style.position = "절대";

MaskDiv.style.zIndex = "1";

MaskDiv.style.width = document.body.scrollWidth + "px";

MaskDiv.style.height = document.body.scrollHeight + "px";

MaskDiv.style.top = "0px";

MaskDiv.style.left = "0px";

MaskDiv.style.Background = "회색";

MaskDiv.style.filter = "알파(불투명도=10)";

MaskDiv.style.opacity = "0.30";//투명도

document.body.appendChild(maskDiv);//본문에 배경 레이어 추가

//대화

varDialogDiv = document.createElement("div");

다이얼로그Div.id = 다이얼로그Id;

DialogDiv.style.position = "절대";

DialogDiv.style.zIndex = "9999";

DialogDiv.style.width = "400px";

DialogDiv.style.height = "200px";

DialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px" // 화면을 중앙에 배치합니다.

DialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px" // 화면을 중앙에 배치합니다.

DialogDiv.style.Background = "흰색";

DialogDiv.style.border = "1px 단색 회색";

DialogDiv.style.padding = "5px";

DialogDiv.innerHTML = "(대화상자 내용)";

//Dialog의 닫기 작업: Background 레이어와 Dialog 레이어를 닫습니다.

var closeControlloer = document.createElement("a");//하이퍼링크 생성(닫기 트리거로)

closeControlloer.href = "#";

closeControlloer.innerHTML = "닫기";

closeControlloer.onclick = 함수() {

document.body.removeChild(getElement(dialogId));//diaglog 삭제

document.body.removeChild(getElement(maskId));//배경 레이어 제거

}

DialogDiv.appendChild(closeControlloer);//대화상자에 "닫기" 작업 추가

document.body.appendChild(dialogDiv);//본문에 대화 상자 추가

}

</script>

<a href="#" onclick="openDialog('dialog');">대화상자 열기</a>