■ jQuery :: draggable을 이용한 움직이는 모달 창 만들기
01. jQuery :: draggable();
jQuery의 draggable은 선택한 레이어를 클릭 드래그 할 수 있게 만들어 주는 기능이다.
해당 포스팅은 draggable을 사용하여특정 레이어를 팝업하고 움직일 수 있는 dialog기능과 같은 모달, 팝업창을 띄우려고 한다.
jQuery UI 데모페이지의 예제 소스는 아래와 같다.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#draggable { width:150px;height:150px;padding:0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html> |
참고 : https://jqueryui.com/draggable/
02. CSS :: position
position 프로퍼티는 레이어를 겹치거나, 특정 위치에 나오게끔 지정하기위해 사용된다.
해당 포스팅에서는 팝업창의 위치를 띄울 absolute와 닫기버튼의 위치지정을위해 static을 사용하였다.
참고 : http://ko.learnlayout.com/position.html
① position:static
static은 기본값이다. position:static;이 설정된 엘리먼튼느 그다지 특별한 방식으로 위치가 지정된 것이 아니다.
정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정되었다고 표현한다.
② position:absolute
absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.
절대위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.
# 소스코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 제이쿼리 UI Draggable ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
#popWindow {
position:absolute;
display:none;
background-color:#000000;
left:10%;
top:10%;
}
#closeBtn {
position:absolute;
width:24px;
z-index:1;
margin-left:-16px;
margin-top:-8px;
}
#popBottom {
height:28px;
text-align:left;
font-weight:bold;
color:#FFFFFF;
padding-left:10px;
padding-right:10px;
}
</style>
<script type="text/javascript">
function popWindowOpen() {
jQuery("#popWindow").css("display", "block");
jQuery("#popWindow").draggable();
}
function popWindowClose() {
jQuery("#popWindow").css("display", "none");
}
</script>
</head>
<body>
<div >
<div id="popWindow">
<div style="text-align:right;">
<a href="javascript:;" onClick="popWindowClose();">
<img id="closeBtn" src="./images/close_icon.png"/>
</a>
</div>
<a href="javascript:;" onClick="">
<img src="./images/an_jihyun.jpg" style="position:static;"/>
</a>
<div id="popBottom">
<label>
<input type="checkbox" onClick="popWindowClose();">
오늘 하루 이 창을 열지 않습니다.
</label>
</div>
</div>
</div>
<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>
</body>
</html> |
# 출력결과
위 이미지와 같이 창을 팝업하면 클릭 드래그 하여 브라우저 이곳저곳으로 움직일 수 있다.
☞ 이어지는 글 : [jQuery] 팝업 창 외에 다른 항목 선택 불가 필름 만들기
