Saturday, September 12, 2015

Draggable diablog

                            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">&times;</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