为Bootstrap模态对话框添加拖拽移动功能

请自行下载使用到的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模态对话框添加拖拽移动功能相关推荐

html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
Bootstrap 模态对话框只加载一次 remote 数据的解决办法
前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...
Bootstrap 模态对话框只加载一次 remote 数据的解决办法转载
http://my.oschina.net/qczhang/blog/190215 摘要前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
目录 JSAPI 的加载使用 JSAPI Loader (推荐) 实现效果: 需求:点击输入框弹窗地图弹窗,输入框输入地址模糊搜索列表结果,点击列表添加相应得marker标记,并且添加标记拖拽选址功 ...
elementui拖拽对话框_实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...
MFC中窗口实现拖拽文件功能
MFC窗口拖拽文件功能指的是用鼠标将文件拖拽入窗口后,在窗口中可以获取拖拽文件的绝对路径,如图1所示. 图1 文件拖拽功能实现窗口的拖拽文件功能,首先要将窗口注册为放置拖拽文件的目标,之后在窗口中响 ...

为Bootstrap模态对话框添加拖拽移动功能

为Bootstrap模态对话框添加拖拽移动功能相关推荐

最新文章

热门文章