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

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>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.