js+css는 중앙에 마스크된 팝업 레이어를 구현합니다(브라우저 창 스크롤 막대로 스크롤).
다음과 같이 코드 코드를 복사합니다.
<!doctype html>
<머리>
<meta charset="utf-8" />
<제목></제목>
<스타일 유형="텍스트/css">
*{}{여백:0;패딩:0;}
html{}{_Background:url(about:blank);} /**//* IE6에서 플래싱을 방지하고, 빈 파일을 about:blank로 바꾸고, 요청을 줄입니다*/
본문{}{배경:#fff; 글꼴: 12px/1.5 Tahoma,Geneva, //5b8b//4f53, sans-serif;
.wrap{}{높이:980px; padding-top:20px;text-align:center;}
p{}{글꼴 크기:14px;text-align:center;line-height:24px;}
/**//** 마스크 레이어**/
#마스크레이어{}{
배경:#000;
디스플레이:없음;
필터:알파(불투명도 = 50);
불투명도:0.5;
상단:0;
왼쪽:0;
높이:100%;
너비:100%;
Z-색인:999;
위치:고정;
_위치:절대;
_left: 표현식(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: 표현식(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
/**//** 팝업 레이어**/
#팝업{}{
디스플레이:없음;
너비:300px;
Z-색인:1000;
왼쪽:50%;
상단:50%;
위치:고정!중요;
여백 왼쪽:-150px !중요;
_위치:절대;
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')?
documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2) /**//*IE5 IE5.5*/
}
.content{}{배경:#f3f3f3;border:1px solid #999;}
.content h3{}{배경:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;}
#clickbtn{}{margin-top:20px;}
</style>
</head>
<본문>
<div>
<p>
나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다
<br />
나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다
<br />
나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다
<br />
나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다
<br />
나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다
</p>
<input type="button" id="clickbtn" value="좋아요" />
</div>
<div id="masklayer"></div>
<div id="팝업">
<div>
<h3> 팝업 레이어가 중앙에 있나요? </h3>
<p>중앙, 중앙, 중앙, 중앙, 중앙, 중앙</p>
<p>중앙, 중앙, 중앙, 중앙, 중앙</p>
<p>중앙, 중앙, 중앙, 중앙</p>
<p>중앙, 중앙, 중앙</p>
</div>
</div>
<스크립트 유형="텍스트/자바스크립트">
(함수(마스크레이어){
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = 함수(){
var popup = document.getElementById('popup');
Masklayer.style.display='차단';
popup.style.display ='차단';
var h = popup.clientHeight;
with(popup.style){
marginTop = -h/2+'px';
}
}
})(document.getElementById('masklayer'))
</script>
</body>
</html>