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="">
    <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>
<div class="side-menu" id="sideMenu">
        <ul class="nav nav-tabs nav-stacked">
                <a href="#myModal" data-backdrop="true" data-toggle="modal">Click Me</a>
<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 class="modal-body">
                <input type="text" />
            <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>
        <!-- /.modal-content -->
    <!-- /.modal-dialog -->
   <!-- /.modal -->


<script type="text/javascript">
    $(function() {
            handle: ".modal-header"
        $("#save").click(function () {



No comments:

Post a Comment