관리 메뉴

맛집 여행 캠핑 일상 생활

움직이는 팝업 만들기 본문

JAVASCRIPT

움직이는 팝업 만들기

♥ 영은파더♥ 2016. 2. 5. 10:50

움직이는 팝업 만들기


1. 소스코드

<style type="text/css">

#popupLayer { position:absolute;border:1px solid gray;overflow:hidden;background-color:#FFFFFF;z-index:9; }

</style>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">

$(function(){

$('#popupLayer').draggable({cursor:'move',snap:true,scroll:true,scrollSensitivity:100});

});

</script>


<div id="popupLayer" style="width:200px;height:150px;text-align:center;background-color:#F0F0FF;">

팝업 내용

</div>


2. 테스트 해보기 (마우스로 드래그 해보세요.)

팝업 내용


Trackback : 0 | Comments : 0
댓글쓰기 폼