js_javascript 기술로 div 팝업 레이어를 구현하는 방법

이 글의 예시에서는 js에서 div 팝업 레이어를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이제는 다양한 플러그인이 나와서 팝업레이어 구현이 정말 쉽다고 하는데 가끔 그런 플러그인이 실용적이지 않다는 생각이 들어서 순수한 js 오리지널 생태학을 찾는 경우가 많습니다. . 기본 js div 팝업 레이어를 공유하겠습니다. 예를 들어, 도움이 필요한 친구들이 살펴볼 수 있습니다.

이에 대해 더 말할 필요 없이 코드와 설명만 게시하세요.

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

/*
* DIV 레이어 팝업
*/
함수 showDiv()
{
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "차단";
//다음 부분은 팝업 레이어를 중앙에 배치해야 합니다
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2 document.documentElement.scrollLeft "px";
Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2 document.documentElement.scrollTop-50 "px";

//다음 부분은 페이지 전체를 회색으로 만들어 클릭할 수 없게 만듭니다
var procbg = document.createElement("div"); //먼저 div를 생성합니다
procbg.setAttribute("id","mybg"); //div의 ID를 정의합니다
procbg.style.Background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "고정";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "알파(불투명도=70)";
//백그라운드 레이어 추가 페이지
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //스크롤바 취소

//다음 부분에서는 팝업 레이어의 드래그 효과를 구현합니다
var posX;
var posY;
mou_head.onmousedown=기능(e)
{
if(!e) e = window.event //IE
posX = e.clientX - parsInt(Idiv.style.left);
posY = e.clientY - parsInt(Idiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
함수 mousemove(ev)
{
if(ev==null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) "px";
Idiv.style.top = (ev.clientY - posY) "px";
}
}
function closeDiv() //팝업 레이어 닫기
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="없음";
document.body.style.overflow = "auto"; //페이지 스크롤 막대 복원
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}

드래그 레이어를 구현하는 데 사용됩니다

일부 미화 효과는 직접 수정할 수 있습니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.