Bootstrap的modal拖动效果
废话不多说了,直接给大家贴代码了,具体代码如下所示:
(function(){ function moveModal($this){ var $head = $this.find('.modal-header'); var $dialog = $this.find('.modal-dialog'); var move = { isMove: false, left: 0, top: 0 }; //委托 console.log('点击的是',$this); $this.on('mousemove', function(e){ if(!move.isMove) return; console.log('移动的是', e.target); $dialog.offset({ top: e.pageY - move.top, left: e.pageX - move.left }); }).on('mouseup', function(e){ move.isMove = false; }); $head.on('mousedown', function(e){ move.isMove = true; var offset = $dialog.offset(); move.left = e.pageX - offset.left; move.top = e.pageY - offset.top; }); } var oldModal = $.fn.modal; $.fn.modal = function(o, _r){ var $this = $(this); if(!$this.attr('ifbindmv')){ $this.attr('isbindmv','1'); moveModal($this); } return oldModal.call(this, o, _r); } ////要拖动的div背景 //$('#showErr').modal({backdrop: 'static'}); })();
以上所述是小编给大家介绍的Bootstrap的modal拖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
解决bootstrap中modal遇到Esc键无法关闭页面
bootstrap为我们提供了很多方便的页面控件,modal就是其中之一.很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效. $('#editFormItemModal').modal({show:true, keyboard:true}); 此问题在2.1以后版本出现,要解决这个问题也很简单,modal所在div添加一个tabindex属性即可: <div class="fade modal" tabindex="-1
-
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,代码
-
Bootstrap模态框(modal)垂直居中的实例代码
Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
-
BootStrap modal模态弹窗使用小结
模态弹窗 触发元素基本结构: 复制代码 代码如下: <button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button> 内容元素基本结构: <div class="modal fade" id="modal"> <div class="modal-d
-
Bootstrap每天必学之模态框(Modal)插件
本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
-
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo
-
Bootstrap的modal拖动效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: (function(){ function moveModal($this){ var $head = $this.find('.modal-header'); var $dialog = $this.find('.modal-dialog'); var move = { isMove: false, left: 0, top: 0 }; //委托 console.log('点击的是',$this); $this.on('mousemove'
-
使用bootstrap实现多窗口和拖动效果
有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触发,打开按钮;2.编写动态打开js脚本; 3.编写modal中间内容;4.添加拖动效果;5.打开多个modal , 调用dragModal(new Array('modalId1','modalId2')); 1.添加一个a链接 触发,打开按钮: <a href="javascript:;&q
-
bootstrap实现弹窗和拖动效果
有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触发,打开按钮;2.编写动态打开js脚本; 3.编写modal中间内容;4.添加拖动效果;5.打开多个modal , 调用dragModal(new Array('modalId1','modalId2')); 1.添加一个a链接 触发,打开按钮: <a href="javascript:;&q
-
angularjs创建弹出框实现拖动效果
本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下 运行效果图: 由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现. .directive('draggable', ['$document', function($document) { return function(scope, element, attr) { var startX = 0,
-
iOS粒子路径移动效果 iOS实现QQ拖动效果
粒子效果,QQ拖动效果,实现很简单,具体代码如下 一.图示 二.分析 我们要实现的如果如上面的图示,那么我们可以按照下面的步骤操作: 第一步:我们的红点其实是一个UIButton.创建一个BageValueView继承自UIButton 第二步:初始化的时候,初始化控件,设置圆角,修改背景.文字颜色 第三步:添加手势.在手势的处理中我们,我们需要让当前控件随着手指移动而移动. 第四步:控件一开始创建的时候,其实有两个圆,一个就是我们能够拖动的大圆,另外一个就是原始位置上会改变大小的圆.这一步骤中
-
jQuery实现拖动效果的实例代码
jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">
-
js实现div在页面拖动效果
本文实例讲述了js实现div在页面拖动效果.分享给大家供大家参考,具体如下: <style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: non
-
JS实现超简单的鼠标拖动效果
本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo
-
Bootstrap 粘页脚效果
Bootstrap 粘页脚,说得具体一点就是"将固定高度的页脚紧贴页面底部".由于项目的实际情况和模板有所区别,所以参照模板,小编不能确保快速的完成"粘页脚"的效果,那么还是要给大家分享本教程,写的不好还请各位大侠海涵! 一.页面效果 页面非常简单,注意亮线为火狐边缘,可以很清楚的看到,页脚灰色部分沉浸在页面底部. 二.实例讲解 ①.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
随机推荐
- Angular ng-repeat指令实例以及扩展部分
- Android开发之加载图片的方法
- asp.net 弹出对话框返回多个值
- CodeIgniter php mvc框架 中国网站
- php实现文件下载实例分享
- jquery制作漂亮的弹出层提示消息特效
- C++编程小心指针被delete两次
- javascript中对Attr(dom中属性)的操作示例讲解
- javascript中setAttribute兼容性用法分析
- 配置IIS服务器 支持sis下载等
- Android设备间实现蓝牙(Bluetooth)共享上网
- 一波C语言二元查找树算法题目解答实例汇总
- Android 实现控件悬浮效果实例代码
- Python实现将绝对URL替换成相对URL的方法
- php两种无限分类方法实例
- Python实现判断一个字符串是否包含子串的方法总结
- java实现微信公众号扫一扫
- Vue源码之关于vm.$delete()/Vue.use()内部原理详解
- python命令行工具Click快速掌握
- vue2.0项目集成Cesium的实现方法