请自行下载使用到的Bootstrap库及jQuery库

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link href="bootstrap.min.css" media="screen" rel="stylesheet">

</head>

<body>

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    打开示例对话框

</button>

<!-- Modal -->

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

    <div id="modalDialog" 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>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>

        </div>

    </div>

</div>

<script src="jquery-1.11.2.min.js"></script>

<script src="jquery-ui.min.js"></script><!--用户拖动元素，链接：http://api.jqueryui.com/draggable/#method-disable/-->

<script src="jquery.ui.touch-punch.min.js"></script><!--移动设备用户拖动元素，依赖juery-ui.min.js，链接：http://touchpunch.furf.com/-->

<script src="bootstrap.min.js"></script>

<script>

    $(document).ready(function(){

        $("#modalDialog").draggable();//为模态对话框添加拖拽

        $("#myModal").css("overflow", "hidden");//禁止模态对话框的半透明背景滚动

    })

</script>

</body>

</html>

为Bootstrap模态对话框添加拖拽移动功能的更多相关文章

  1. HTML bootstrap 模态对话框添加用户

    HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...

  2. Bootstrap -- 模态框实现拖拽移动

    ### 这里实现这个效果 需要引入 jquery-ui.min.js类库 jquery-ui.min.css样式 使用它提供的draggable()方法实现 ### 菜鸟教程 http://www.r ...

  3. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  4. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  5. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  6. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

  7. vue实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...

  8. 实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...

  9. angular-dragon-drop.js 双向数据绑定拖拽的功能

    在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...

随机推荐

  1. nodeJS---URL相关模块用法(url和querystring)

    nodeJS---URL相关模块用法(url和querystring) 一: URL模块: URL模块用于解析和处理URL的字符串,提供了如下三个方法: 1. parse 2. format 3. r ...

  2. centos7搭建elasticsearch

    Elasticsearch:负责日志检索和分析,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等 Logstash:对日志进行收集.过 ...

  3. Visual Studio 工具选项设置

    1.显示行号 2.颜色主题 3.显示引用 一 显示行号 1)设置方式:工具-选项-文本编辑器-C#,勾选行号确定 二 颜色主题 1)设置方式:工具-选项-环境-常规,下拉选择:浅色.蓝色.深色,点确定 ...

  4. Android学习之基础知识五—创建自定义控件

    下面是控件和布局的继承关系: 从上面我们看到: 1.所有控件都是直接或间接继承View,所有的布局都是直接或间接继承ViewGroup 2.View是Android中最基本的UI组件,各种组件其实就是 ...

  5. Android 由 android:launchMode="singleInstance“引发的界面无法返回的情况

    问题描述:现有A.B.C三个Activity.现在A跳转到B再由B跳转到C,然后依次返回.正常情况是C先返回B然后再返回的A.但现在的情况是C直接跳过B直接返回到A了. 解决办法:认真排查了A.B.C ...

  6. 为什么建议php字符串使用单引号而不是双引号

    不少php提升效率的tip,都有提到字符串使用单引号,这是为什么呢? 因为在单引号中,php直接认为它里头包含的就是个字符串.而双引号时,php会检测里头是否包含变量.这样如果是纯粹的字符串的话,双引 ...

  7. 快速排序的php实现

    再来一个非常高级的排序算法,快速排序...这个算法是很高效的. 快速排序的思路是,找到一个分割点(中枢点 默认是列表第一个值),把原列表分隔成两部分,在分割点左侧的是都比它小的,在它右侧的是都比它大的 ...

  8. UOJ14 DZY Loves Graph 并查集

    传送门 题意:给出一张$N$个点,最开始没有边的图,$M$次操作,操作为加入边(边权为当前的操作编号).删除前$K$大边.撤销前一次操作,每一次操作后询问最小生成树边权和.$N \leq 3 \tim ...

  9. 字符串阵列String[]转换为整型阵列Int[]

    原始数据: string input = "3,7,2,8,1,9,1,34,67,78,22"; 要处理为: " }; 最终处理为: , , , , , , , , , ...

  10. 使用Win PE修改其他硬盘中的系统注册表

    使用场景:原来装的机械硬盘系统盘为C盘,后来买了个SSD固态硬盘后,进入WinPE系统后,把原来的C盘整个复制到了固态硬盘,然后用BooticeX64.exe工具在UEFI启动中增加SSD固态硬盘中的 ...