可直接使用代码

 <!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. Python - learn note(1)

    1. 下载安装Python 2.7(为了向下兼容以前的版本), Python 3.5(VS2015不支持配置3.6的环境) 教程 需要使用VS2015进行开发,必须勾选上后面两项: 2. VS2015 ...

  2. 《转》快速导出SSRS之RDL文件

    select name,[path],cast(cast(content AS varbinary(max)) as xml) as RDLDef from dbo.[Catalog] where t ...

  3. zepto 的 css 方法 -- 待续

    链接 获取样式:  getComputedStyle  什么是计算后的样式 就是经过css样式组合 和 js操作后 的 最后的结果 设置样式有三种方法: div.style.backgroundCol ...

  4. jQuery progression 表单进度

    progression.js是一款表单输入完成进度插件.支持自定义提示框大小.方向.左边.动画效果.间距等,也支持是否显示进度条.字体大小.颜色.背景色等. 在线实例 实例演示 使用方法 <fo ...

  5. SUSE Linux Enterprise Server设置IP地址、网关、DNS（转载）

      说明: ip:192.168.21.172 子网掩码:255.255.255.0 网关:192.168.21.2 dns:8.8.8.8 8.8.4.4 1.设置ip地址vi /etc/sysco ...

  6. iOS-----使用addressBook管理联系人之修改联系人

    使用addressBook管理联系人之修改联系人 修改联系人 修改联系人先从底层地址簿中加载一条ABRecordRef记录,然后对这条ABRecordRef记录的属性值进行修改,修改完成后把这条修改后 ...

  7. 用 Python 快速实现 HTTP 和 FTP 服务器

      用 Python 快速实现 HTTP 服务器 有时你需临时搭建一个简单的 Web Server,但你又不想去安装 Apache.Nginx 等这类功能较复杂的 HTTP 服务程序时.这时可以使用  ...

  8. IO的概念

    什么是IO: 在内存中存在数据交换的操作都可以认为是IO操作 和终端交互:input print 和磁盘交互:read write 和网络交互:recv send IO密集型程序:在程序执行过程中存在 ...

  9. np.ones(N)/N的作用

    在python中导入numpy包 N=5 weights = np.ones(N)/N       //这里就相当于创建了一个数组,且为5个1/5的数组 print "weights&quo ...

  10. Oozie_01安装教程【20161116】

    说明:hadoop用的是hadoop-2.5.0-cdh5.3.6 Oozie用的是oozie-4.0.0-cdh5.3.6 该测试环境用户名为hadoop  主机名为hadoop01 2.4安装部署 ...