프로그래밍/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 를 잘 따서 쓰면 기본 모양새가 난다.

 

한번만 셋팅해서 자기껄로 만들어놓으면 이래저래 많이 쓸일이 많을꺼다.