모달창 이동, 드래그 가 가능
[head]
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
[jsp]
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li><a href="#myModal" data-backdrop="false" data-toggle="modal">Click Me</a>
</li>
</ul>
</menu>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
[script]
$("#myModal").draggable({
handle: ".modal-header"
});
[css]
.modal
{
overflow: hidden;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
'script' 카테고리의 다른 글
[jQuery] jOrgChart 트리구조 차트 (0) | 2015.07.02 |
---|---|
[jQuery] serialize() & serializeArray() (0) | 2015.06.24 |
[jQuery] mouseenter, mouseleave, mouseover, mouseout (0) | 2015.06.23 |
[JavaScript] escapeXml (0) | 2015.06.15 |
CKEditor <P>태그 제거하기 (0) | 2015.06.08 |