为Bootstrap Modal(模态框)全局添加拖拽操作
在js中绑定方法
$(document).on("show.bs.modal", ".modal", function(){
$(this).draggable({
// handle: ".modal-header" // 只能点击头部拖动
});
$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
});
| 事件 | 描述 | 示例 |
|---|---|---|
| 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. });
|
为Bootstrap Modal(模态框)全局添加拖拽操作的更多相关文章
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- bootstrap模态框实现相对定位拖拽
1.正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果. $(".modal .modal-h ...
- bootstrap modal模态框的运用
http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- 修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
- Bootstrap modal 模态框垂直居中显示补丁
<script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...
- 设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...
- bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
随机推荐
- 这几种JavaScript语法不要轻易使用,容易出事
文章目录 12种不宜使用的JavaScript语法 1. == 2. with 3. eval 4. continue 5. switch 贯穿 6. 单行的块结构 7. ++和-- 8. 位运算符 ...
- C#使用WebClient时,如果状态码不为200时,如何获取请求返回的内容
目录 一.事故现场 二.解决方法 一.事故现场 使用WebClient发送请求,如果返回的状态码不是2xx或3xx,那么默认情况下会抛出异常, 那如何才能获取到请求返回的内容呢? 二.解决方法 可以通 ...
- linux中文件压缩介绍
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/1c62bb7f-f ...
- Ajax获取网页添加到div中
1:利用DOM获取该 div 的 ID,然后清空该DIV的内容(如果你需要接着里面的内容添加可不要清空):需要注意点是清空最好用“ empty() ”: 2: 把 async设成true ,否则又 ...
- 利用ExecuteMultipleRequest来批量导入数据,成功的成功失败的失败,并生成导入结果文件
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- day03运算符、表达式、自增自减、三目运算符、程序结构、用户输入
复习 1.java的输出语句 1)System.out.println(); 2)System.out.print(); 2.注释 1)单行注释 // 2)多行注释 /* .... */ 3.变量 1 ...
- CentOS 磁盘在线扩容
场景介绍: 操作系统Centos7.x 系统有一块vdisk,容量为20G,共分为3个区(swap和boot分区为标准分区xfs文件系统,根分区为LVM分区,xfs文件系统) 业务需求:在VM系统不关 ...
- jar包要读取的资源文件路径问题
本地调试读取文件没有问题 获取 Thread.currentThread().getContextClassLoader().getPath() 读取文件 打jar包之后 获取的路径出错 不能读取文件 ...
- 2019有赞中高级Java工程师面试题与解答
说说JVM的内存分区 线程私有的区域 程序计数器:JVM中程序计数器相当于汇编语言中的CPU中的寄存器,保存程序当前执行的指令的地址. 虚拟机栈:Java方法执行的栈由许多个栈帧构成,每个栈帧对应一个 ...
- PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...