이 기사에서는 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 = "alpha (불투명도 = 70)";
// 배경 레이어를 페이지에 추가합니다
document.body.appendChild (ProcBG);
document.body.style.overflow = "숨겨진"; // 스크롤 바를 취소합니다
// 다음 부분은 팝업 레이어의 드래그 효과를 인식합니다.
var posx;
var posy;
mou_head.onmousedown = function (e)
{
if (! e) e = Window.event; //즉
posx = e.clientx -parseint (idiv.style.left);
posy = e.clienty -parseint (idiv.style.top);
문서 .OnMousEmove = MousEmove;
}
document.onmouseup = function ()
{
document.onmouseMove = null;
}
기능 MouseMove (EV)
{
if (ev == null) ev = window.event; // 즉
idiv.style.left = (ev.clientx -posx) + "px";
idiv.style.top = (ev.clienty -posy) + "px";
}
}
함수 closediv () // 팝업 레이어를 닫습니다
{
var idiv = document.getElementById ( "idiv");
idiv.style.display = "none";
document.body.style.overflow = "Auto"; // 페이지 스크롤 바를 복원합니다
var body = document.getElementsByTagName ( "body");
var mybg = document.getElementById ( "MyBG");
Body [0] .RemoveChild (MYBG);
}
<!-팝 레이어 시작->
<div id = "idiv"style = "display : none; 위치 : 절대; z-index : 1000; 배경 :#67a3d9;">
<div id = "mou_head"100px; 높이 = 10px; z- 인덱스 : 1001; 위치 : 절대; "> 이것은 드래그 레이어를 구현하는 데 사용됩니다 </div>
<입력 유형 = "버튼"value = "close"onclick = "closediv ();" />
</div>
<!-end->
미화 효과는 직접 수정할 수 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.