angularjs modal模态框----创建可拖动的指令

//最近项目中需要将angular-ui-bootstrap中用到的弹出框，使之可拖动，由于源文件中没有实现，需要自己实现指令，以下即为该指令，亲测可以实现。.directive('draggable', ['$document', function($document) {return function(scope, element, attr) {var startX = 0, startY = 0, x = 0, y = 0;element= angular.element(document.getElementsByClassName("modal-dialog")); element.css({position: 'relative',cursor: 'move'});element.on('mousedown', function(event) {// Prevent default dragging of selected contentevent.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);}};}]);

如图：已不在屏幕中央，为拖动后的效果

转载于:https://www.cnblogs.com/bobo-show/p/5106204.html

angularjs modal模态框----创建可拖动的指令相关推荐

修改bootstrap modal模态框的宽度
修改bootstrap modal模态框的宽度修改的不是modal这个大div 而是modal-dialog这个会话div <div class="modal fade" ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
angular模态框位置_angular $modal 模态框
引入了angular-ui-bootstrap插件 Document 大中小设置了3个按钮大的模态框,中的和小的.对应着bootstrap 中的modal样式在另一个HTML配置弹出来的对话 ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件
模态框模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. <div class=" ...
微信小程序 html modal,微信小程序参考微信设计规范做的modal模态框
昵称 {{user.nickName}} 未填写 modal: function (e) { var self = this; this.setData({ modal: (e && ...
设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 [html] view plaincopy <div class="modal-dialog&quo ...
BootStrap修改modal模态框的宽度
修改的不是modal这个div,而是modal-dialog这个div,代码如下 <div class="modal-dialog" style="width:11 ...

angularjs modal模态框----创建可拖动的指令

angularjs modal模态框----创建可拖动的指令相关推荐

最新文章

热门文章