为Bootstrap Modal(模态框)全局添加拖拽操作

原创 2016年08月30日 22:58:29

在js中绑定方法

$(document).on("show.bs.modal", ".modal", function(){
    $(this).draggable({
//        handle: ".modal-header"   // 只能点击头部拖动
    });
    $(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
});

bootstrap modal 的events:
查了好久才查到:(

事件 描述 示例
show.bs.modal 在调用 show 方法后触发。 $("#identifier").on('show.bs.modal', function(){//do sth. });
show.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 $("#identifier").on('shown.bs.modal', function(){//do sth. });
hide.bs.modal 当调用 hide 方法时触发。 $("#identifier").on('hide.bs.modal', function(){//do sth. });
hidden.bs.modal 当模态框完全对用户隐藏时触发。 $("#identifier").on('hidden.bs.modal', function(){//do sth. });

详细参考:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

版权声明:原创文章,转载请注明出处。

BootStrap modal加入拖拽功能

bootstrap 中有javascript插件modal也就是对话框,加入拖拽功能 在使用modal时首选需要引用js link href="//cdn.bootcss.com/boot...
  • xiaoreqing
  • xiaoreqing
  • 2016年06月08日 09:32
  • 8793

bootstrap可视化拖动操作

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootst...
  • qianhong_
  • qianhong_
  • 2016年09月14日 19:39
  • 2161

bootstrap布局可视化可拖拽

  • 2016年05月25日 09:45
  • 1.52MB
  • 下载

为bootstrap模态窗口添加拖拽(draggable )事件

Launch demo modal × Modal title ...
  • hunannanhu
  • hunannanhu
  • 2016年07月06日 15:56
  • 3229

Bootstrap框架使用拖拽插件Nestable

最近写个项目,前端页面需要使用拖拽功能,秉着不要重复造轮子的心态,在网上找到一个靠谱的插件Nestable,很好用。但在使用中依然发现了部分问题。最直观的一个就是当将一个dd-list中的所有dd-i...
  • u011832039
  • u011832039
  • 2016年03月23日 19:30
  • 7860

Bootstrap 实现文件的本地拖拽上传

代码: uploadfile.html 文件上传 /* layout.css Style */ .upload-drop-zo...
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2017年07月27日 17:40
  • 1215

bootstrap模态框实现拖拽

bootstrap modal模态框实现拖拽
  • baidu_35407267
  • baidu_35407267
  • 2016年12月14日 08:59
  • 1471

Bootstrap modal模态框可拖动

问题:Bootstrap模态框默认不可拖动,如果屏幕不适配模态框大小,容易造成用户使用不方便的问题。解决方法:可全局加,也可单页面添加下列代码。$(document).on("show.bs.moda...
  • gloomy_114
  • gloomy_114
  • 2016年11月10日 10:29
  • 4299

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

请自行下载使用到的Bootstrap库及jQuery库 html> html> head lang="en"> meta charset="UTF-8"> title>title> ...
  • hnllc2012
  • hnllc2012
  • 2016年01月29日 16:06
  • 12364

Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法...
  • yingzheng1983
  • yingzheng1983
  • 2015年09月22日 22:30
  • 23039
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:为Bootstrap Modal(模态框)全局添加拖拽操作
举报原因:
原因补充:

(最多只允许输入30个字)