可直接使用代码

 <!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之屌炸天的变形匹配（1）

    在日常工程应用中,我们通常通过halcon的 shape-based matching(形状匹配)进行各种定位, 如以前文章介绍的这样,理解各个参数并灵活应用通常就能得到很好的匹配效果和匹配速度, 当 ...

  2. mmap实现大文件快速拷贝

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  3. iOS UILabel两端对齐的实现（可包括中英文/数字）

    - (void)conversionCharacterInterval:(NSInteger)maxInteger current:(NSString *)currentString withLabe ...

  4. Centos7 安装JDK环境和Tomcat

    Linux JDK 64位下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.ht ...

  5. java第十次面试题

    一.给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg,字符串内的其他字符不改变,给定函数,编写函数. public static void ...

  6. [TopCoder14647]HiddenRabbits

    vjudge description 有一棵\(n\)个节点的树和\(m\)只兔子,每只兔子要住在一个点上(可以多只兔子住在同一个点上).有\(q\)组要求,每组形如"当以\(r\)为根时, ...

  7. am335x_y蜂鸣器驱动

    修改文件:1.板级文件/arch/arm/mach-omap2/board-am335xevm.c static struct platform_device buzzer_device= { .na ...

  8. hive 处理小文件，减少map数

    1.hive.merge.mapfiles,True时会合并map输出.2.hive.merge.mapredfiles,True时会合并reduce输出.3.hive.merge.size.per. ...

  9. 字符串作为freemarker模板的简单实现例子

    本文转载自:http://blog.csdn.net/5iasp/article/details/27181365 package com.test.demo; import java.io.IOEx ...

  10. phpcms 实现动态价格

    什么是动态价格(自命名)?——  一般来说商品有个固定的价格,随着节假日或者促销活动可能会发生价格变化,结束后又恢复原价,如果每次价格变化都需要修改价格,那么不仅在时间上不好把握,也需要消耗更多的人力 ...