可直接使用代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>model</title>

         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

         <!-- 完成拖拽功能 -->

         <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>

         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

     </head>

     <body>

         <div class="container-fluid">

             <center>

                 <h1>可拖拽的模态框</h1>

                 <button class="btn btn-primary" id="click">

                     <i class="glyphicon glyphicon-floppy-disk"></i> click

                 </button>

             </center>

             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

                 <div class="modal-dialog" role="document">

                     <div class="modal-content">

                         <div class="modal-header">

                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                             <h4 class="modal-title" id="myModalLabel"></h4>

                         </div>

                         <div class="modal-body">

                             <div class="form-group">

                                 <label for="txt_departmentname">部门名称</label>

                                 <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">

                             </div>

                             <div class="form-group">

                                 <label for="txt_parentdepartment">上级部门</label>

                                 <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">

                             </div>

                             <div class="form-group">

                                 <label for="txt_departmentlevel">部门级别</label>

                                 <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">

                             </div>

                             <div class="form-group">

                                 <label for="txt_statu">描述</label>

                                 <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">

                             </div>

                         </div>

                         <div class="modal-footer">

                             <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i> 关闭</button>

                             <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> 保存</button>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

         <script type="text/javascript">

             //注册新增按钮的事件

             $("#click").click(function() {

                 $("#myModalLabel").text("新增");

                 $('#myModal').modal();

             });

             // 无按钮时自动加载

             //$('#myModal').modal();

             // 在模态框出现后添加可拖拽功能

             $(document).on("show.bs.modal", ".modal", function() {

                 $(this).draggable({

                     handle: ".modal-header", // 只能点击头部拖动

                     cursor: "crosshair"

                 });

                 $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的

             });

         </script>

     </body>

 </html>

可拖拽模态框，不能控制拖拽范围，使用 containment:"window" 之后连拖拽都不行了，有知道的小伙伴烦请告知一下，谢谢！

基于jquery-ui及bootstrap的可拖拽模态框的更多相关文章

  1. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  2. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  5. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  6. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  7. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  8. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  9. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

随机推荐

  1. halcon之最小二乘拟合直线

    如果不了解最小二乘算法 请先阅读: Least squares的算法细节原理https://en.wikipedia.org/wiki/Least_squares 通常在halcon中拟合直线会用ho ...

  2. Python 编程核心知识体系-基础|数据类型|控制流（一）

    Python知识体系思维导图: 基础知识 数据类型 1.序列 2.字符串 3.列表和元组 4.字典和集合 循环 & 判断

  3. mouseover、mouseout和mouseenter、mouseleave

    这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这 ...

  4. 使用c++实现一个FTP客户端(二)

    接上篇http://www.cnblogs.com/jzincnblogs/p/5213978.html,这篇主要记录编程方面的重点. 客户端使用了Windows Socket提供的API,支持上传. ...

  5. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  6. promise的基础知识

    promise 相当于异步操作结果的占位符 它不会去订阅一个事件,也不会传递一个回调函数给目标函数,而是让函数返回一个promise,例如: let promise = readFile('a.txt ...

  7. Python数据类型-04.字典

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据 ------------ 完美的分割线 ------------- 1.字典引入 # 为何还要用字典?存放一个人的信 ...

  8. mysql中的隐式转换

    在mysql查询中,当查询条件左右两侧类型不匹配的时候会发生隐式转换,可能导致查询无法使用索引.下面分析两种隐式转换的情况 看表结构 phone为 int类型,name为 varchar EXPLAI ...

  9. windows 不能在本地计算机启动SqlServer. 参考特定服务错误代码10048

    这一般都是由于Sql Server的端口号被其他应用程序占用导致的,可以使用dos命令或者网络工具查看当前端口的使用情况,看看哪个程序占用了Sql Server的默认端口1433,将这个程序结束就可以 ...

  10. Linux下驱动模块学习

    1.modutils中提供了相关的insmod,rmmod,modinfo工具2.modprobe在识别出目标模块所依赖模块后也是调用insmod.3.从外部看模块只是普通可重定位的目标文件.可重定位 ...