jQuery bPopup (팝업 플러그인)

UI짜면서 가끔씩 고민되는 것이 있습니다.

1. 페이지를 이동할까?

2. 새창을 띄울까?

3. 얼럿을 띄울까?

4. 레이어팝업을 사용할까?

특히나 3번과 4번같은 경우는 자주 고민하곤 합니다.

개인적으로 얼럿을 별로 좋아하지 않아서 그런지 얼럿창이 남발하는 사이트는 너무너무 싫습니다.

특히나 한번만 띄우면 될것을 두번 띄운다던가,

얼럿창에 글자를 꽉꽉 채워넣는 다던가..

뭔가 답답하고, 딱딱하다 느껴집니다. 저 혼자만의 기분탓이겠지만요 :)

그래서 저는 개발할때 레이어팝업을 자주 사용하곤 합니다.

레이어팝업을 사용하면 내맘대로 투박한 얼럿대신 깔끔하게 꾸밀 수 있기 때문이죠.

꼭 경고창이 아니더라도 간단정보를 입력한다거나, 도움말을 본다거나 할때 레이어팝업은 매우 중요한것 같습니다.

화면이동없이 배경화면을 흐릿하게 해놓고 중앙에 팝업을 띄워놓으면 그렇게 깔끔할수가 없습니다. :D

그래서 이번에는 사용법도 간단하면서 UI도 깔끔한 jQuery 팝업 플러그인을 소개해드리겠습니다.

정식 명칭은 jQuery.bPopup(링크) 입니다.

링크 누르셔서 이동하시면 우측상단에 다운로드버튼 있습니다.

사용법은 매우 간단합니다.

$('element_to_pop_up').bPopup();

 

가장 기본적인 셋팅입니다.

원하시는 엘리먼트를 셀렉터로 잡으신뒤 bPopup 함수를 호출하시면 레이어팝업이 화면 중앙에 생성됩니다.

여기서 말씀드리는 화면 중앙이라는건, body 가 부모일 경우를 말합니다.

쉽게말해 핵심은 셀렉터의 부모에 맞게 레이어팝업이 생성된다는 것입니다.

만약 후라이드반 양념반처럼 레이아웃을 반으로 나눴다는 가정하에 좌측에 레이어팝업을 생성하면 좌측의 크기기준으로 좌측중앙에 레이어팝업이 생성됩니다.

$('element_to_pop_up').bPopup().close();

 

팝업 닫기는 이렇게 하시면 됩니다.

중앙이 아닌 다른 위치에서 나타나야 할 경우도 있겠죠.

$('element_to_pop_up').bPopup({
	follow: [false, false], //x, y
	position: [150, 400] //x, y
});

 

그래서 이렇게 옵션을 추가하여 생성하면 됩니다.

먼저 follow 옵션은 따라다니기 여부입니다.

(인자는 좌측이 x 우측이 y 이며 타입은 boolean 입니다.)

예를들어 x쪽으로 true를 주었다면 위아래로 스크롤할시 따라다닙니다.

반대로 y쪽으로 true를 주었다면 좌우로 스크롤할시 따라다니게 되구요.

그래서 둘다 false를 줄 경우, 위지는 고정이 되겠습니다.

그리고 position 옵션은 말그대로 위치를 뜻합니다.

(인자는 좌측이 x 우측이 y 이며 타입은 int 입니다.)

위의 예제에서는 좌에서 150px, 상에서 400px 인 위치에서 생성하게 됩니다.

그 외에 여러가지 옵션들이 있습니다.

$('element_to_pop_up').bPopup({
	modalClose: false,
	opacity: 0.6,
	followSpeed: 1500, //can be a string ('slow'/'fast') or int
	speed: 450,
	transition: 'slideDown',
	transitionClose: 'slideBack',
	autoClose: 1000
});

순서대로

modalClose : 배경을 눌러서 팝업 닫기 여부

opacity : 배경 투명도

followSpeed : 따라다니는 속도

speed : 에니메이션 속도

transition : 팝업 열릴 때 애니메이션 옵션

transitionClose : 팝업 닫힐 때 애니메이션 옵션

autoClose : 자동 닫기 (밀리초)

그 외에도 여러가지 옵션이 있습니다. 나머지는 직접 해보시길 :)

bPopup 플러그인은 콜백또한 지원합니다.

$('element_to_pop_up').bPopup({
	onOpen: function() { alert('열리기전 호출'); }, 
	onClose: function() { alert('닫히고나면 호출'); }
}, function() {
	alert('열리고나면 호출');
});

 

콜백부분은 따로 설명하지 않겠습니다. 소스를 참고해 주세요.

그 외에도 iframe 팝업도 지원합니다.

$('element_to_pop_up').bPopup({
	content:'iframe',
	contentContainer:'.content',
	loadUrl:'http://annotations.tistory.com/'
});

 그리고 재미있는 기능이 한가지 있습니다.

어떤 모양, 어떤 색상, 어떤 위치에 나올지 모르는 랜덤 팝업!

$('element_to_pop_up').bPopup({
	???
});

한번씩 재미로 쓰기 좋습니다.

아 물론 개인적으로만요. 실무에서는 사용할 경우가 거의 없겠죠 :)

마지막으로 bPopup 플러그인은 본인이 알아서 꾸며야 합니다.

백그라운드 색상이나 그런것들은 옵션으로 가능하지만 그 외에 요소들은 모두 직접 꾸미셔야 합니다.

그래서 추천한 이유도 있습니다. 개성있게 만들어 사용하면 좋으니까..

예를들자면 팝업 내부의 색상, 닫기 버튼의 모양 등..

이미지 사용하셔두 되구요, 단색으로 알아서 잘 꾸며서 사용하셔두 됩니다.

마음껏 요령껏 멋잇게 이쁘게 잘 꾸며보세요 :D