웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jQuery Modal(모달창) 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jQuery Modal(모달창)

해피CGI윤실장 2019. 4. 26. 09:10

jquery-modal 은 이름 그대로 jQuery 를 이용하여 여러가지 모달을 구현해 놓았습니다. 

 

1.일반 모달창 

 

 

2.로그인 모달창

 

 

3.콘텐츠에 맞춘 모달창

 

 

4.Ajax 모달창

 

 

5.닫기 버튼이 없고 오직 브라우저를 닫기 밖에 안되는 모달창

 

 

6.다중 모달창

 

 

 

 

7.페이드 효과가 포함된 모달창


8.닫기 버튼 커스텀 버젼 모달창



기본 모달창 1개를 이용하여 여러가지 타입으로 나눠서 샘플을 잘 구성해 두었네요.

그래서 필요한 상황에 맞는 모달을 가져와서 사용하시면 좋을듯 합니다. 


사용법은 생각보다 간단합니다. 

첨부된 압축파일 해제 하시면 examples/index.html 파일을 보시면 샘플코드가 들어 있습니다. 

 

기본 모달의 호출조건은 아래의 이미지를 봐 주세요

 

 

모달 버튼의 href 와 모달 레이어의 id 값을 매칭 시켜주세요. 

저는 이미지 처럼 happycgi 로 매칭 시켰습니다. 

 

 

홈페이지바로가기 소스다운로드

Comments