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

WBOY
풀어 주다: 2016-05-16 17:39:40
원래의
1307명이 탐색했습니다.

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

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

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

효과를 보려면 여기를 클릭하세요


글꼴 계열: 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에서 미리보기




크롬에서 미리보기



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿