完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本
在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法
1.下载并引入jquery-ui插件
2.全局添加模态框允许拖动事件
$(document).on("show.bs.modal", ".modal", function(){
$(this).draggable({
handle: ".modal-header" // 只能点击头部拖动
cursor: 'move',
});
$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
});
这里记录一下bootstrap modal 的事件:
show.bs.modal:在调用 show 方法后触发。
show.bs.modal:当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
hide.bs.modal:当调用 hide 方法时触发。
hidden.bs.modal:当模态框完全对用户隐藏时触发。
这种解决模态框拖动的方法还不完美,由于设置了只能点击头部拖动,经常出现下面这种拖动出页面边界后,点不到头部所以无法拖动回来的情况
jquery-ui中可以设置约束运动,即添加 $( element ).draggable({ containment: "parent" });
但是设置draggable的.modal元素宽高是100%,导致无法拖动。
所以需要修改一下,让拖动元素改为.modal下的.modal-dialog,但是.modal-dialog有个css属性 margin:30px auto 对横向拖动有影响,为此就想办法修改这个属性,网上让模态框竖向居中正好适合。
竖向居中的方法是修改bootstrap源码:
在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法。
在that.$element.addClass('in').attr('aria-hidden', false)代码前加入下面这段代码。
that.$element.children().eq(0).css("position", "absolute").css({
"margin": "0px",
"top": function () {
return (that.$element.height() - that.$element.children().eq(0).height() - 40) / 2 + "px";
},
"left": function () {
return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
}
});
到这里就完美解决了!
$(document).on("shown.bs.modal", ".modal", function(){
var dialog = $(this).find(".modal-dialog");
dialog.draggable({
handle: ".modal-header", // 只能点击头部拖动
cursor: 'move',
refreshPositions: false,
scroll: false,
containment: "parent"
});
$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
});
完美解决bootstrap模态框允许拖动后拖出边界的问题的更多相关文章
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
- 解决bootstrap模态框居中问题
完美解决办法: 在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法. 在that.$element.addClass('in').att ...
- (转)解决bootstrap 模态框的页面抖动
使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 黄聪:解决Bootstrap模态框(modal)弹出后页面跑到顶部的办法
bootstrap 3.1.1 版本解决方案: body.modal-open { position: absolute !important; }
- 解决bootstrap 模态框 数据清除 验证清空
$("#switchModel").on("hidden.bs.modal", function () { $('#ware-form')[0].reset() ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题
WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...
随机推荐
- Python--urllib3库
Urllib3是一个功能强大,条理清晰,用于HTTP客户端的Python库,许多Python的原生系统已经开始使用urllib3.Urllib3提供了很多python标准库里所没有的重要特性: 1 ...
- SourceTree使用介绍
SourceTree比命令行更容易操作,能更直观看到发生了什么.但是没有哪一家git图形化软件能完成git的所有操作,封装后的使用也隐藏了git的一些细节,在图形化工具出现一些非常罕见的情况时,还是需 ...
- PHP面向对象深入研究之【组合模式与装饰模式】
组合模式 定义:组合模式定义了一个单根继承体系,使具有截然不同职责的集合可以并肩工作. 一个军队的案例, <?php abstract class Unit { // 个体 abstract f ...
- 虚拟机如何设置外网ip
实例: 在数据中心机房的一台服务器上安装虚拟机,并在该虚拟机上安装一个操作系统.给该虚拟机配置公网IP,让外网能直接访问到该虚拟上的应用. 这个问题最初觉得简单,不就是桥接嘛,要只让其上网NAT就可以 ...
- javascript好文分享
JavaScript精华 http://www.cnblogs.com/jesse2013/p/the-part-of-javascript-you-must-know.html JavaScript ...
- Linq语句:三表联查
var db = new DataEntities2(); var sss = ( from c in db.AIRPORT_HELIPORT ...
- JS||JQUERY常用语法
cookieEnabled属性语法 通常可以在浏览器的临时文件夹中保存一个文件,此文件可以包含用户信息(比如浏览过什么页面,是否选择了自动登录)等,这个文件被称作cookie,通过cookieEnab ...
- 【281】◀▶ arcpy.mapping 常用类说明
arcpy.mapping 教程入门 arcpy.mapping 指导原则 按字母顺序排序的 arcpy.mpping 类列表 按字母顺序排序的 arcpy.mpping 函数列表 按字母顺序排序的 ...
- C#使用ADO操作Excel
1 说明 把excel当成一个数据库,类似于Access数据库来操作. 2 源代码 2.1 Model层 /// <summary> /// 人员信息 /// </summary&g ...
- JS中日期处理