Jquery 팝업 창 플러그인 LeanModal_jquery 사용 방법

팝업창 형태의 웹사이트 개발은 필수인데 오늘은 나의 편의와 다른 분들의 편의를 위해 인터넷에서 LeanModal이라는 작은 플러그인을 검색해서 여기에 기록해 두었습니다.

이 플러그인은 외국인이 작성한 플러그인인데 압축 후 용량이 1k도 안되는 작은 크기가 가장 큰 장점입니다. 물론 이 플러그인은 JQuery에 기생합니다.

2. 사용 단계:

　1. Jquery.js 및 leanModal.min.js를 참조하세요.

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

2. 이 스타일은 반투명 배경 레이어에 사용됩니다. 숨기려면 다음과 같습니다.

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

#lean_overlay { 위치: 고정; z-색인: 0px; 높이: 100%; 배경: #000; 없음 반복 스크롤 0 0 #FFFFFF; 테두리 반경: 0 0 4px rgba(0, 0, 0, 0.7); 디스플레이: 없음: 하단: 404px; -색인: 11000; 왼쪽: - 202px; 위치: 고정; 위: 200px;

2가지 방법이 있습니다. > 방법 1은 ID가 있는 요소를 팝업창에 첨부하는 방법
방법 2는 A 태그에 rel="leanModal"이 있는 모든 요소를 ​​팝업창에 첨부할 수 있는 방법

오버로드할 수 있는 매개변수는 3개입니다.
top: 팝업 창의 상단부터 거리, 단위는 픽셀이며 "px"를 추가하지 않습니다.
오버레이: 배경의 투명도, 최대값은 1. 값이 클수록 투명도가 깊어집니다. 초기값은 0.5입니다.
닫기버튼: 열려 있는 창의 닫기 버튼 스타일




코드 복사

코드는 다음과 같습니다. $(document).ready(function () { 　　　　　 / /$('#aOpen').leanModal ({ top: 100, closeButton: ".modal_close" })

$('a[rel*=leanModal]').leanModal({ top: 100, closeButton: ".modal_close" });

});


3. 데모 다운로드
온라인 데모
http://demo.jb51.net/js/ 2012/LeanModal/

패키지 다운로드
http://www.jb51.net/jiaoben/42278.html