UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
고정레이어
팝업

설명
예제-1은 흔히 사용하는 레이어 팝업으로 크기에 상관없이 항상 화면의 중앙에 뜬다.(가로만)
layer_open(el)
- el : 레이어 팝업의 ID

HTML

					예제-1 보기
					

Thank you.
Your registration was submitted successfully.
Selected invitees will be notified by e-mail on JANUARY 24th.

Hope to see you soon!

CSS

					<style type="text/css">
						.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto;  background-color:#fff; border: 5px solid #3571B5; z-index: 10;}	
						.pop-layer .pop-container {padding: 20px 25px;}
						.pop-layer p.ctxt {color: #666; line-height: 25px;}
						.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}

						a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}	
						a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}
					</style>
				

Javascript

					<script type="text/javascript">
						function layer_open(el){

							var temp = $('#' + el);		//레이어의 id를 temp변수에 저장
							var bg = temp.prev().hasClass('bg');	//dimmed 레이어를 감지하기 위한 boolean 변수

							if(bg){
								$('.layer').fadeIn();
							}else{
								temp.fadeIn();	//bg 클래스가 없으면 일반레이어로 실행한다.
							}

							// 화면의 중앙에 레이어를 띄운다.
							if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
							else temp.css('top', '0px');
							if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
							else temp.css('left', '0px');

							temp.find('a.cbtn').click(function(e){
								if(bg){
									$('.layer').fadeOut();
								}else{
									temp.fadeOut();		//'닫기'버튼을 클릭하면 레이어가 사라진다.
								}
								e.preventDefault();
							});

							$('.layer .bg').click(function(e){
								$('.layer').fadeOut();
								e.preventDefault();
							});

						}				
					</script>
				
설명
예제-2는 Dimmed 레이어 팝업으로 배경이 회색으로 Dimmed가 되고 레이어는 스크롤과 상관없이 항상 화면의 중앙에 고정이 된다.
닫기 버튼을 클릭하거나 배경을 클릭하면 레이어팝업이 닫힌다.
layer_open(el)
- el : 레이어 팝업의 ID

HTML

					예제-2 보기
					

Thank you.
Your registration was submitted successfully.
Selected invitees will be notified by e-mail on JANUARY 24th.

Hope to see you soon!

CSS

					<style type="text/css">
						.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
							.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
							.layer .pop-layer {display:block;}

						.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto;  background-color:#fff; border: 5px solid #3571B5; z-index: 10;}	
						.pop-layer .pop-container {padding: 20px 25px;}
						.pop-layer p.ctxt {color: #666; line-height: 25px;}
						.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}

						a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}	
						a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}
					</style>
				

Javascript

					<script type="text/javascript">
						function layer_open(el){

							var temp = $('#' + el);
							var bg = temp.prev().hasClass('bg');	//dimmed 레이어를 감지하기 위한 boolean 변수

							if(bg){
								$('.layer').fadeIn();	//'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다. 
							}else{
								temp.fadeIn();
							}

							// 화면의 중앙에 레이어를 띄운다.
							if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
							else temp.css('top', '0px');
							if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
							else temp.css('left', '0px');

							temp.find('a.cbtn').click(function(e){
								if(bg){
									$('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. 
								}else{
									temp.fadeOut();
								}
								e.preventDefault();
							});

							$('.layer .bg').click(function(e){	//배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러
								$('.layer').fadeOut();
								e.preventDefault();
							});

						}				
					</script>
				

Thank you.
Your registration was submitted successfully.
Selected invitees will be notified by e-mail on JANUARY 24th.

Hope to see you soon!

Thank you.
Your registration was submitted successfully.
Selected invitees will be notified by e-mail on JANUARY 24th.

Hope to see you soon!