可直接使用代码

 <!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. PHP:第五章——字符串的分割与替换

    <?php header("Content-Type:text/html;charset=utf-8"); //字符串的截取与分割 //1.字符串截取类函数 //1)trim ...

  2. halcon之屌炸天的自标定（1）

      本次先对halcon的自标定做个整体介绍,了解屌炸天的自标定在实际应用中的应用与实现方法,具体的编程细节将在后续的文章中介绍. halcon提供了一种自标定的算子,它可以在不用标定板的情况下,标定 ...

  3. Hadoop本地安装

    安装JDK卸载已经安装的JDK安装sun公司的JDK安装Hadoop(本地方式)解压并安装启动测试程序 安装JDK 卸载已经安装的JDK rpm -qa|grep jdk rpm -qa|grep g ...

  4. 分析hello.java文件

    使用JavaServer Faces技术的Web模块示例 1.hello1: hello1应用程序是一个web模块,它使用JavaServer Faces技术来显示问候和响应.可以使用文本编辑器查看应 ...

  5. Java例子

    1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一个重要的命令javac ...

  6. mysql配置调优-开启慢查询日志-slow_query_log

    工作中,会遇到需要查看mysql的top 20 慢sql,逐个进行优化,加上必要的索引这种需求,这时就需要开启数据库的慢查询日志的功能 1.查询当前慢查询日志的状态 # 默认为关闭状态 mysql - ...

  7. WPF 程序 处理未捕获异常，和程序莫名终止说拜拜

    http://www.cnblogs.com/liuyueyu/p/4476151.html 百密一疏的Bug很难避免,没有谁能保证,我的程序永远 0 BUG; 突然接手一个很庞大的项目,在项目运行期 ...

  8. poj3311 经典tsp问题

    题目的大概意思就是一个人到一些城市送披萨,要求找到一条路径可以遍历每个城市后返回出发点,而且路径距离最短.最后输出最短距离就可以. 注意:每个城市可反复訪问多次. 因为题中明白说了两个城市间的直接可达 ...

  9. Javascript 中 switch case 等于 （== ）还是 恒等于（===）？

    Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...

  10. bzoj 4823 [Cqoi2017]老C的方块——网络流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4823 一个不合法方案其实就是蓝线的两边格子一定选.剩下两部分四相邻格子里各选一个. 所以这个 ...