UI Laboratory

UI 개발을 위한 레퍼런스

원하는 위치에
레이어팝업
띄우기

아래는 레이어팝업을 화면의 중앙에 띄우거나 원하는 위치에 띄우는 함수이다. 이를 위해 options 매개변수에 top과 left정보를 갖는 객체 리터럴을 인자로 함수에 전달한다. 이때 left정보를 전달하지 않으면 레이어팝업은 화면의 중앙에 나타난다.

openLayer(targetID, options)
- targetID : 레이어 팝업의 ID
- options : 레이어 팝업의 위치 정보
설명
예제-1은 첫번째 인자에 레이어를 띄울 팝업의 ID값을 전달하고 두번째 인자로 객체 리터럴을 전달하여 openLayer 함수의 options 매개변수에 대입된다. 이 객체 리터럴은 레이어 팝업의 위치 정보인 top과 left 속성을 가지고 있으며 원하는 값을 전달하여 원하는 위치에 레이어 팝업을 뛰울 수 있다. 이때 left속성과 값을 전달하지 않으면 레이어팝업은 화면의 중앙에 나타난다. 아래는 car라는 아이디를 가지는 레이어 팝업을 top 700px에 화면의 중앙에 띄운다.

openLayer('car',{top:700});

예제-1 화면의 중앙에 띄우기

설명
예제-2는 두번째 매개변수인 options에 전달될 객체 리터럴에 top과 left 속성을 모두 전달하여 원하는 위치에 레이어 팝업을 띄운다.

openLayer('poster',{top:900, left:100;});

예제-2 화면의 원하는 위치에 띄우기

HTML

					

중앙에 띄우기

원하는 위치에 띄우기

CSS

					<style type="text/css">
						.layer-popup {display:none; position:absolute; left:50%; top:175px; z-index:10; padding:30px 30px 35px; margin-left:-235px; background-color:#fff; border:1px solid #000;}
					</style>
				

Javascript

					<script type="text/javascript">

						function openLayer(targetID, options){
							var $layer = $('#'+targetID);
							var $close = $layer.find('.close');
							var width = $layer.outerWidth();
							var ypos = options.top;
							var xpos = options.left;
							var marginLeft = 0;
							
							if(xpos==undefined){
								xpos = '50%';
								marginLeft = -(width/2);
							}

							if(!$layer.is(':visible')){
								$layer.css({'top':ypos+'px','left':xpos,'margin-left':marginLeft})
									.show();
							}

							$close.bind('click',function(){
								if($layer.is(':visible')){
									$layer.hide();
								}
								return false;
							});
						}

					</script>