为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 ...
随机推荐
- 浅析堆栈段,BBS段,数据段,代码段
文章目录 1. 进程,线程 2. 堆栈段 3. BBS段 4. 代码段 5. 数据段 6. 例子 7. 总结 1. 进程,线程 所谓进程是指在系统中能独立运行并作为资源分配的基本单位,程序段,数据段和 ...
- bsoj5988 [Achen模拟赛]期望 题解
bsoj5988 Description [题目背景] NOI2018 已经过去了许久,2019 届的 BSOIer 们退役的退役,颓废的颓废,计数能力大不如前.曾经的数数之王 xxyj 坦言:&qu ...
- js获取当前时间的年月日时分秒以及时间的格式化
1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear( ...
- Dynamics 365 Portal 修改注册页面及Profile页面
一,Profile页面 客户要求在Portal Profile页面上添加性别字段,通过查看源代码发现,中间的联系人信息部分是引用的CRM中Contact实体的Portal Web Form表单,直接把 ...
- iOS核心动画高级技巧 - 6
11. 基于定时器的动画 基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲 ...
- windows10 双系统安装后,grub2 引导修复(亲自实验);grub2 命令行 手动加载内核;fedora 29 系统grub2引导修复;
之前在本机有fedora 29的系统,但是由于错误安装,把windows10 启动安装到 linux 所在的硬盘中,导致原来的 efi中的grub启动被破坏,不能进入到linux中:我首先通过磁盘精灵 ...
- 创建mysql索引的方式
创建索引方式: 1.create index 索引名 on 表名 (字段) 2.alter table 表 add index 索引名 (字段) -- 普通索引 alter table 表名 ...
- SpringBoot源码篇:Spring5内置tomcat实现code-based的web.xml实现
一.简介 上篇文章讲了SpingBoot诞生的历史背景和技术演进背景,并通过源码说明了SpringBoot是如何实现零配置的包括如何省去web.xml配置的原理.本文接上一篇文章,通过demo演示Sp ...
- EF实体类指定部分属性不映射成数据库字段特性
添加NotMapped 特性 /// <summary> /// 用户名 /// </summary> [NotMapped] public string user_name ...
- 从0使用Ruby on Rails打造企业级RESTful API项目实战之我的云音乐
本节对我们项目实现的功能和知识点做一个简单的介绍,因为是RESTful API项目,所以对于后端来说基本上没有什么UI界面可展示,那我们就在关键的点,使用客户端(Android)实现的效果图. 课程简 ...