Node.js CSS는 마스크 중심 팝업 레이어를 구현합니다(브라우저 창 스크롤 막대로 스크롤)

Node.js CSS는 마스크 중심 팝업 레이어를 구현합니다(브라우저 창 스크롤 막대로 스크롤)_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:09:47

원래의

1070명이 탐색했습니다.

Node.js CSS는 마스크된 중앙 팝업 레이어를 구현합니다(브라우저 창 스크롤 막대로 스크롤)

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

< ;style type="text/css">
*{}{margin:0;padding:0;}
html{}{_Background:url(about:blank);} /**//* IE6에서 깜박임을 방지하고, 빈 파일을 about:blank로 바꾸고, 요청을 줄입니다. */
body{}{배경:#fff; 글꼴: 12px/1.5 Tahoma,Geneva, \5b8b\4f53, sans-serif; height:100%;}
.wrap{ }{height-980px; padding-top:20px;text-align:center;}
p{}{font-size:14px;text-align:center;line-height:24px;}
/* *//** 마스크 레이어 **/
#masklayer{}{
배경:#000;
표시:없음
필터:알파(불투명도 = 50)
불투명도: 0.5; >상단:0;
높이:100%;
z-색인:999
위치:절대; ;
_left: 표현식(documentElement.scrollLeft documentElement.clientWidth - this.offsetWidth);
_top: 표현식(documentElement.scrollTop documentElement.clientHeight - this.offsetHeight)
/**//** 팝업 레이어 **/
#popup{}{
디스플레이:없음
너비:300px
z-index: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; padding-left:5px;}
#clickbtn{}{margin-top:20px;}
< /head>

나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다

나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다

나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 나는 본문이다 내가 본문이다 나는 본문이다 text

내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다

내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다 내가 본문이다
< /p>

;/div>
< div id="popup">

중심, 중심, 중심, 중심, 중심, 중심

중심, 중심, 중심, 중심

중앙 중앙
중앙 중앙

script type=" text/javascript">
(function(masklayer){
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = function(){
var 팝업 = document.getElementById('popup');
masklayer.style.display='block';
popup.style.display ='block';
var h = popup.clientHeight; (popup.style ){
marginTop = -h/2 'px';
}
}
})(document.getElementById('masklayer'))

< ;/body>