为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模态框默认不可拖动,如果屏幕不适配模态框大小,容易造成用户使用不方便的问题。解决方法:可全局加,也可单页面添加下列代码。$(document).on("show.bs.moda...

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

请自行下载使用到的Bootstrap库及jQuery库 html> html> head lang="en"> meta charset="UTF-8"> title>title> ...

bootstrap模态框实现拖拽

bootstrap modal模态框实现拖拽

BootStrap modal加入拖拽功能

bootstrap 中有javascript插件modal也就是对话框,加入拖拽功能 在使用modal时首选需要引用js link href="//cdn.bootcss.com/boot...

基于JQuery 改造bootstrap模态框拖动功能

看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理。 PS:这是别人介绍的拖动实现 http://www.gbtags.com/gb/rtreplayerpreview/230...

bootstrap可视化拖动操作

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootst...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

bootstrap modal模态窗口拖拽功能

/** 拖拽模态框*/ var dragModal={ mouseStartPoint:{"left":0,"top": 0}, m...

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

Launch demo modal × Modal title ...

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

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

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