Draggable dialog using JQuery UI
- We need to reference Jquery and Jquery UI
- In the script we need to specify modal as draggable as shown below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Model Pop up</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/Custom-jquery-ui.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet"/>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li>
<a href="#myModal" data-backdrop="true" 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">Title</h4>
</div>
<div class="modal-body">
<input type="text" />
<p>Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="save" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
script
<script type="text/javascript">
$(function() {
$("#myModal").draggable({
handle: ".modal-header"
});
$("#save").click(function () {
}
);
});
</script>
Output
No comments:
Post a Comment