请自行下载使用到的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. Spring Security 重定向原理分析

    本文基于 spring-security-core-5.1.1 和 tomcat-embed-core-9.0.12. 一个用户访问使用表单认证的 Web 应用时,后端的处理流程大致如下: 1.用户访 ...

  2. 理解WebSocket心跳及重连机制（五）

    理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的 ...

  3. Java 中数组的内存分配

    Java 中数组的内存分配 1.Java 程序在运行时,需要在内存中分配空间.为了提高运算效率,就对空间进行了不同区域的划分,因为每一片区域都有特定的处理数据和内存管理方式. 2.数组基本概念 数组是 ...

  4. eclipse中文字体大小修改

    貌似有不少人苦恼eclipse中文字体大小修改问题,默认的eclipse中文字体很小,和英文字体大小完全不在一个调子上,因为默认的eclipse juno中英文字体是Consolas,字体大小是10, ...

  5. Nginx URL后面不加斜杠301重定向

    今天开发碰到一个问题,其实之前就有这个问题,但是一直都没去关注,今天测试碰到了就解决一下. 问题情况: 当我请求 http://admindev.jingruiauto.com/store/views ...

  6. Ubuntu 打包后安装提示：子进程 已安装 pre-removal 脚本 返回了错误号 1

    子进程 已安装 pre-removal 脚本 返回了错误号 1或2 与 子进程 已安装 post-installation 脚本 返回了错误号 1或2   一.子进程 已安装 pre-removal  ...

  7. R实战 第十篇：列联表和频数表

    列联表是观测数据按两个或更多属性(定性变量)分类时所列出的频数分布表,它是由两个以上的变量进行交叉分类的频数分布表.交互分类的目的是将两变量分组,然后比较各组的分布状况,以寻找变量间的关系. 按两个变 ...

  8. Docker环境编译时的错误记录

    1)报错一docker-compose -f compose/app.yaml -f compose/backend.yaml -f compose/proxy.yaml build peatio b ...

  9. iOS网络请求安全认证（JWT，RSA）

    在网络世界中,安全是一个很重要的问题,以往的HTTP请求已经不能承担这个安全任务,抓包工具一抓,你的所有网络请求全都曝光.当然,你可能会采用加密算法来加密数据,但是这仍然不够. 在移动端和服务器的通信 ...

  10. php的垃圾回收机制

    转载请附上本文地址:http://blog.csdn.net/u011957758/article/details/76864400 前言 是的,平时经常听到大牛说到的gc,就是垃圾回收器,全称Gar ...