>웹 프론트엔드 >JS 튜토리얼 >JQuery에서 생성된 확대 효과가 있는 팝업 대화 상자(jquery 플러그인이 추가되지 않음) Share_jquery

JQuery에서 생성된 확대 효과가 있는 팝업 대화 상자(jquery 플러그인이 추가되지 않음) Share_jquery

WBOY
WBOY원래의
2016-05-16 17:35:011370검색

더 이상 고민하지 않고 바로 주제로 가서 확대 효과가 있는 팝업 대화 상자를 공유해 보겠습니다. 프로젝트에서 필요에 따라 CSS를 작성할 수 있으며 메트로 스타일 사이트에서 재사용할 계획입니다.

애니메이션 효과가 상당히 멋진 것 같습니다. 처리하면 더 좋을 것 같습니다.

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


;
<제목>
>< ;style>
body { 배경: #ace; 글꼴: 12px/1.2 Arial, Helvetica, sans-serif }
ul li { 배경:#fff; 너비:100px; 100px; float:left; }
배경:투명;
디스플레이:없음
왼쪽:50%;
z-색인: 10001
}
#content {
배경:#fff;
테두리:1px 솔리드 #666;여백:-50px 0 -50px; 🎜> 너비:100px; 높이:100px;
z-색인:
}
#mask{
위치: 절대;
왼쪽: 0;
폭: 100%;
높이: 100%;
배경색: #000000;
디스플레이: 없음

}
닫기
{
너비:30px;
배경색:빨간색
디스플레이:없음
closeShow
{
너비:30px;
여백-왼쪽:50px
배경색:빨간색; 커서: 포인터
}