可直接使用代码

 <!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. xml生成javabean(zhuan)

    package com.dom4j; import java.io.File;import java.io.FileWriter;import java.io.IOException;import j ...

  2. tcpdump学习笔记

    简介     简单的说,tcpdump就是一个抓包工具,类似Wireshark.     tcpdump可以根据使用者的定义过滤/截取网络上的数据包,并进行分析.tcpdump可以将数据包的头部完全接 ...

  3. Git Error: warning: refname 'origin/branch-name' is ambiguous.

    When this happened, it created the file .git/refs/heads/origin/branch-name. So, I just deleted the f ...

  4. Eclipse 项目有红惊叹号

    Eclipse 项目有红感叹号原因:显示红色感叹号是因为jar包的路径不对 解决:在项目上右击Build Path -> Configure Build Paht...(或Propertise- ...

  5. Testng优势

    选择Testng的理由: 1.可指定执行顺序, dependsOnMethods 属性来应对测试的依赖性问题. 2.·参数化1:轻轻松松从XML中得到参数 @BeforeClass public vo ...

  6. java之美妙的注解

    注解 一.认识注解 先看百度百科对java注解的解释: 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它 ...

  7. fusionjs 学习一 基本试用

    参考demo 项目 https://github.com/rongfengliang/fusionjs-docker-demo 安装 create startkit yarn global add c ...

  8. Linux菜鸟入门级命令大全

    1. man 对你熟悉或不熟悉的命令提供帮助解释eg:man ls 就可以查看ls相关的用法注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行.2. ls 查看目录或者 ...

  9. elasticsearch安装入门

    简介Elasticsearch是一个高度可扩展的开源的分布式Restful全文搜索和分析引擎. 它允许用户快速的( 近实时的) 存储. 搜索和分析海量数据. 它通常用作底层引擎技术, 为具有复杂搜索功 ...

  10. 修改panabit web管理介面端口

    panabit使用mini_httpd为web发布平台,版本为1.19.使用https协议发布,端口443,运行命令为/usr/panabit/bin/ipe_httpd. panabit启动时使用/ ...