angularjs modal模态框----创建可拖动的指令
//最近项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现。
.directive('draggable', ['$document', function($document) {
return function(scope, element, attr) {
var startX = , startY = , x = , y = ;
element= angular.element(document.getElementsByClassName("modal-dialog"));
element.css({
position: 'relative',
cursor: 'move'
}); element.on('mousedown', function(event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
}); function mousemove(event) {
y = event.pageY - startY;
x = event.pageX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
} function mouseup() {
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
}
};
}]);
如图:已不在屏幕中央,为拖动后的效果
angularjs modal模态框----创建可拖动的指令的更多相关文章
- 轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <se ...
- angularjs 简易模态框
angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...
- 【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- angular $modal模态框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- angularJs解决模态框下echarts不显示问题
例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...
- 修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
随机推荐
- OS X Lion版 如果我忘记了我的账户密码 我该怎么办?
来到了 mac os x lion 10.7 上. 忘记密码的朋友不会减少. 除了努力回忆和询问自己的老婆外还有其他办发不? 那是自然有的. 帐户密码很重要虽然有时候我们设置了帐户自动登陆但是如果您需 ...
- c++ new带括号和不带括号
在new对象的时候有加上(),有不加(),不知道这个到底是什么区别?比如:CBase *base = new CDerived();CBase *base = new CDeviced; 很多人都说, ...
- 【转】模块编译Android源码方法
原文网址:http://blog.csdn.net/androidlover1991/article/details/17014055 实际开发中,并不需要每次都编译所有源代码,只需要编译自己修改的模 ...
- C#验证码
using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; us ...
- Delphi 6 Web Services初步评估之三(转)
Delphi 6 Web Services初步评估之三(转) Delphi 6 Web Services初步评估之三(转)★ 测试总体印象:在整个测试中,对Delphi 6创建的Web Servi ...
- Json 的日期格式转换成DateTime
JSON 的日期形式:”/Date(1242357713797+0800)/” , 下面我们就用以下C#的方法将他转换成DateTime类型: /// <summary> /// Json ...
- Axure初体验:简单交互、通过按钮切换图片
前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...
- hdu 4411 arrest 最小费用流
#include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...
- winform 导出TXT 分类: WinForm 2014-05-15 15:29 128人阅读 评论(0) 收藏
截图: 代码实现:(导出txt按钮事件) using System.IO; using System.Data.OleDb; private void btnOutTxt_Click(object s ...
- IAP内购 返回的产品数量为0
上个月搞IAP,提交到appstore审核被拒,根据附件截图 可以知道是请求产品信息的时候,产品数量返回0了. 返回产品数量为0 要么是Itunes Connect 里面的Contracts Tax ...