javascript 자바스크립트 레이어 팝업 화면 중앙에 띄우는 방법
일반적인 window.open 을 사용한 팝업이 아니라
레이어 팝업을 구현하려 한다.
여기에 모달 팝업창 같이 팝업창 이외의 기능은 사용할 수 없도록 기능을 추가 할 것이다.
우선 <body>내에 원하는 곳에 팝업으로 쓸 <div>를 추가합니다.
(위치는 상관 없습니다. 보기 쉬운 곳에 넣으세요.)
우선 팝업에 사용될 디자인부터 추가 합니다.
(여기서 z-index에 유의 합니다. 값이 클 수록 위로 올라옵니다.)
<!-- 팝업용 CSS 추가 -->
<style type="text/css">
#popup{overflow:hidden; height:auto; display:block; border-radius:3px; box-shadow:0px 1px 1px #333; width:260px; z-index:100; position:absolute; top:20%; left:10%;}
#popup h4{background:#659fd5; font-size:15px; height:24px; padding:8px 0 2px 15px ; color:#FFF; font-weight:normal;}
#popup h4 a.close{float:right; padding-right:8px; color:#FFF; font-family:verdana}
.popCont{display:block; background: #FFF; border:2px solid #659fd5; padding:15px 20px; }
.popCont li{height:24px; width:100%; display:inline-block; margin:0; border-top:1px solid #eaeaea; font-size:12px; }
.popCont li:last-child{border-bottom:1px solid #eaeaea; padding-bottom:3px;}
.popCont strong{float:left; width:30%; background: #aaa; color:#FFF; padding:7px 0; text-align:center; border-right:1px solid #eaeaea; }
.popCont span{display:block; float:left; padding:7px 0 7px 8px;}
</style>
<!-- //팝업용 CSS 추가 -->
<!-- 팝업 레이어 -->
<div id="popup" style="position:absolute; visibility:hidden;">
<h4>팝업레이어<a href="#" class="close" onClick="javascript:popupOpen()">X</a> </h4>
<ul class="popCont">
<li>
<strong>이름</strong>
<span id='name'>홍길동</span>
</li>
</ul>
</div>
<!-- //팝업 레이어 -->
현재 레이어 팝업은 visibility 옵션이 hidden 이기 때문에 보이지 않습니다.
팝업을 보이게 할 함수를 정의합니다.
숨겨져 있으면 보이게 보여져 있으면 숨기게.
<!-- //레이어 팝업 오픈 이벤트 -->
이제 팝업을 화면 정 중앙에 위치시키도록 소스를 추가 해보자.
<!-- 팝업 화면 중앙에 위치 시키기 -->
//추가부분
var $layerPopupObj = $('#popup');
var left = ( $(window).scrollLeft() + ($(window).width() - $layerPopupObj.width()) / 2 );
var top = ( $(window).scrollTop() + ($(window).height() - $layerPopupObj.height()) / 2 );
$layerPopupObj.css({'left':left,'top':top, 'position':'absolute'});
$('body').css('position','relative').append($layerPopupObj);
이벤트를 실행하면 팝업이 화면 정중앙에 뜨는 것을 확인 할 수 있다.
다음 링크에서 이 레이어 팝업을 모달팝업처럼 배경 흐리게 하여 띄우는 방법에 대해 알아보자.
Link : jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기
'Programing > jQuery' 카테고리의 다른 글
| bxslider 이미지 슬라드, 버튼 클릭해 이미지 슬라이드, 이미지 슬라이더, 이미지 넘어가기 (0) | 2016.02.24 |
|---|---|
| jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기 (0) | 2016.01.20 |
| $(function(){ }); 부분이 실행 안될 때 Uncaught ReferenceError: $ is not defined 해결방법 (3) | 2015.12.08 |
| 제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method (0) | 2015.08.07 |
| 제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method (0) | 2015.08.02 |
댓글