집 >웹 프론트엔드 >JS 튜토리얼 >jQuery CSS html은 페이지 마스크 팝업 box_jquery를 구현합니다.

jQuery CSS html은 페이지 마스크 팝업 box_jquery를 구현합니다.

WBOY원래의: 2016-05-16 17:39:401317검색

페이지 마스크 팝업 상자가 가장 일반적인 상황입니다. 현재 페이지 마스크 팝업 상자를 구현하는 데 사용되는 주요 기술은 JQuery, CSS 및 html입니다.

html 코드는 다음과 같습니다.

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

< ;/div>

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

글꼴 계열: Arial, Helvetica, sans-serif

글꼴 크기:12px 
여백:0 
} 
#main { 
높이:1800px ; 
padding-top:90px; 
text-align:center; 
#fullbg { 
left:0; 0.5; 위치:절대; 
z-index:3 
filter:alpha(opacity=50) 
 -khtml-opacity:0.5; 
 } 
#dialog { 
배경색:#fff; 
테두리:5px 솔리드 rgba(0,0,0, 0.4); 400px; 
왼쪽:50%; 
여백:-200px 0 0 -200px; 
padding:1px; 
위치:고정 !important; 절대; 
폭:400px; 
경계 반경:5px; 
}
# 대화 상자 p { 
여백:0 0 12px; 
줄 높이:24px 
배경:#CCCCCC; 
#dialog p.close 🎜>text-align:right; 
padding-right:10px; 
#dialog p.close a { 
color:#fff 
 >} 



jQuery 코드는 다음과 같습니다. 




코드 복사


 코드는 다음과 같습니다. 

대략적인 미리보기: 

ie9에서 미리보기

Firefox에서 미리보기

크롬에서 미리보기

성명：

이전 기사：블로그 사이드바 모듈이 스크롤 바를 따라 슬라이딩되는 고정 효과 구현 방법(js jquery 등)_javascript 기술다음 기사：블로그 사이드바 모듈이 스크롤 바를 따라 슬라이딩되는 고정 효과 구현 방법(js jquery 등)_javascript 기술

jQuery CSS html은 페이지 마스크 팝업 box_jquery를 구현합니다.

관련 기사