프로그래밍/Jquery
[jquery] Layer Box - Light Box
아메리카노™
2014. 2. 20. 23:55
바로가기 >> http://buckwilson.me/lightboxme/
내가 가장 많이 이용하는 Lightbox 이다.
아이디 중복검색이나, 우편번호 찾기 등등 기존에 팝업으로 처리하던걸 위 모듈을 이용하면 뽀대난다
간단한 사용방법은
$('객체지정').lightbox_me({
옵션
});
이다.
예제를 들어보자면
<script src='Jquery 경로'></script>
<script src='lightBox js 파일 경로'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#sign_up').lightbox_me({
centered: true,
onLoad: function() {
$('#sign_up').find('input:first').focus(); //-- 첫번째 Input Box 에 포커스 주기
}
});
});
</script>
<div id='sign_up'>팝업내용</div>
가 될수 있겠다.
물론 $(document).ready 를 했으니까 페이지 로딩이 끝나면 lightBox 가 실행된다.
사이트에 방문하면 샘플이 있는데 저 샘플의 CSS 를 잘 따서 쓰면 기본 모양새가 난다.
한번만 셋팅해서 자기껄로 만들어놓으면 이래저래 많이 쓸일이 많을꺼다.