请自行下载使用到的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. 分布式计算（四）Azkaban安装

    Azkaban是一个批量工作流任务调度器,使用Java语言开发.用于在一个工作流内以一个特定的顺序运行一组工作和流程.Azkaban使用job配置文件建立任务之间的依赖关系,并提供一个易于使用的web ...

  2. rbac组件

    创建新项目 新建一个项目untitled,注意django 版本为1.11 修改models.py,增加2个表 from django.db import models class Classes(m ...

  3. MySQL（六）常用语法和数据类型

    阅读MySQL语法时,需要注意的规则: ①符号用来指出几个选择中的一个,比如:null | not null表示或者给出null或者给出not null: ②包含在方括号中的关键字或子句(如[like ...

  4. http协议进阶（四）报文首部

    之前写的关于报文首部的传送门: 报文首部:http://www.cnblogs.com/imyalost/p/5708445.html 通用首部字段:http://www.cnblogs.com/im ...

  5. Luogu4219 BJOI2014 大融合 LCT

    传送门 题意:写一个数据结构,支持图上连边(保证图是森林)和询问一条边两端的连通块大小的乘积.$\text{点数.询问数} \leq 10^5$ 图上连边,$LCT$跑不掉 支持子树$size$有点麻 ...

  6. asp.net网站，在没有项目源码情况下的扩展

    如果在没有源码的情况下,要扩展asp.net网站,可以自己新增一个类库项目,在里面添加需要扩展的类,代码如下: using System; using System.Collections.Gener ...

  7. python 常见矩阵运算

    python 的 numpy 库提供矩阵运算的功能,因此我们在需要矩阵运算的时候,需要导入 numpy 的包. 1.numpy 的导入和使用 from numpy import *;#导入numpy的 ...

  8. C#的RSA加密解密签名，就为了支持PEM PKCS#8格式密钥对的导入导出

    差点造了一整个轮子 .Net Framework 4.5 里面的RSA功能,并未提供简单对PEM密钥格式的支持(.Net Core有咩?),差点(还远着)造了一整个轮子,就为了支持PEM PKCS#8 ...

  9. ElasticSearch实践系列(一)：安装

    Elasticsearch简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作底层引擎/技术,为具有复杂搜索功能和要求的 ...

  10. Centos7下部署两套python版本并存环境的操作记录

    需求说明:centos7.2系统的开发机器上已经自带了python2.7版本,但是开发的项目中用的是python3.5版本,为了保证Centos系统的正常运行,以及节省机器资源(不想因此再申请另外一台 ...