jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
来源:互联网 发布:初学者模拟炒股软件 编辑:程序博客网 时间:2024/06/05 15:50
首先我做的bootstrap的拖拽功能是靠插件jquery-ui实现的,所以使用前必须要先在jquery.js之后引入JS,
大概是这样的顺序
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"><script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script><script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script> // 完成拖拽功能<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> // 完成Modal
在JS中的绑定方法
$(".modal").each(function(){ $(this).draggable({ handle: ".modal-header" // 只能点击头部拖动 }); $(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的});
也可以绑定在弹出事件上
$(document).on("show.bs.modal", ".modal", function(){ $(this).draggable(); //直接这样写,点击整个弹窗的任意部位都能拖动});
bootstrap modal 的四个常用事件:
$("#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. });
阅读全文
0 0
- jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
- BootStrap modal加入拖拽功能
- bootstrap modal模态窗口拖拽功能
- JQuery UI的拖拽功能实现方法小结
- JQuery UI的拖拽功能
- JQuery UI的拖拽功能
- jquery的拖拽UI功能
- JQuery UI的拖拽功能
- JQuery UI的拖拽功能(转
- jquery UI 写的拖拽功能
- JQuery UI的拖拽功能
- JQuery UI的拖拽功能
- jQuery UI 拖拽功能
- Bootstrap Modal的“上一步”,“下一步”切换功能的实现
- PHP + bootstrap modal + jQuery实现页面刷新
- 为Bootstrap Modal(模态框)全局添加拖拽操作
- jquery 模块拖拽功能的实现
- bootstrap modal在项目的实现思路
- 单链表与双向链表
- mybatis新增处理逗号
- extern与头文件(*.h)的区别和联系
- 《C语言程序设计教程》(一)
- 神经机器翻译(Neural Machine Translation)系列教程
- jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
- CSDN-markdown编辑器用法
- 合并两个排序的链表
- matlab画图程序整理
- 数据库索引的实现原理
- LeetCode 290. Word Pattern
- [LeetCode] Roman to Integer
- 使用OpenDDS建立简单的订阅系统(二)
- 获取一个数的所有因子并判断完数