可直接使用代码
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>model</title> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 8 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 9 <!-- 完成拖拽功能 --> 10 <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script> 11 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 12 </head> 13 14 <body> 15 <div class="container-fluid"> 16 <center> 17 <h1>可拖拽的模态框</h1> 18 <button class="btn btn-primary" id="click"> 19 <i class="glyphicon glyphicon-floppy-disk"></i> click 20 </button> 21 </center> 22 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 23 <div class="modal-dialog" role="document"> 24 <div class="modal-content"> 25 <div class="modal-header"> 26 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 27 <h4 class="modal-title" id="myModalLabel"></h4> 28 </div> 29 <div class="modal-body"> 30 31 <div class="form-group"> 32 <label for="txt_departmentname">部门名称</label> 33 <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称"> 34 </div> 35 <div class="form-group"> 36 <label for="txt_parentdepartment">上级部门</label> 37 <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门"> 38 </div> 39 <div class="form-group"> 40 <label for="txt_departmentlevel">部门级别</label> 41 <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别"> 42 </div> 43 <div class="form-group"> 44 <label for="txt_statu">描述</label> 45 <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态"> 46 </div> 47 </div> 48 <div class="modal-footer"> 49 <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i> 关闭</button> 50 <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> 保存</button> 51 </div> 52 </div> 53 </div> 54 </div> 55 </div> 56 <script type="text/javascript"> 57 //注册新增按钮的事件 58 $("#click").click(function() { 59 $("#myModalLabel").text("新增"); 60 $('#myModal').modal(); 61 }); 62 // 无按钮时自动加载 63 //$('#myModal').modal(); 64 65 // 在模态框出现后添加可拖拽功能 66 $(document).on("show.bs.modal", ".modal", function() { 67 $(this).draggable({ 68 handle: ".modal-header", // 只能点击头部拖动 69 cursor: "crosshair" 70 }); 71 $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的 72 }); 73 </script> 74 </body> 75 76 </html>
可拖拽模态框，不能控制拖拽范围，使用 containment:"window" 之后连拖拽都不行了，有知道的小伙伴烦请告知一下，谢谢！