如何让弹出窗口可以拖动呢?
如何做出可以拖动的对话框呢?
实际上弹出窗口就是一个div,范例:
<!-- 弹出窗口层 --> <div id="subPagePanel" style="display:none;" > <h2 style="color: #fff;font-weight: bold;" class="ui-icon-close" ><label>发帖</label> <a title="关闭" onclick="closeSubPagePanel();" style="margin-top: 4px;margin-right: 4px; " class="close" ></a> </h2> <div id="subContent" ><!-- <img style="margin:500px;width:50px" src="<%=path%>/static/images/loading/progress.gif"> --> </div> </div> <!-- / 弹出窗口层 -->
对应的css:
#subPagePanel { overflow-y: auto; overflow-x: auto; width: 640px; /* top: 10px !important; */ left: 10px; height: auto/* 320px */; position: absolute; background-color: rgba(255, 255, 255, 0.9); z-index: 99996; background-repeat: no-repeat; background-position: center; display: none; border:1px solid #ea4748; border-radius: 5px; } #subPagePanel h2{ background-color: #ea4748; height: 40px; line-height: 40px; padding-left: 5px; cursor: move; }
js 方法:
drag = function ($obj) { if (arguments.length == 0) { return; } if ($obj == null || $obj == undefined) { return; } if (typeof $obj == 'string') {//when $obj is a string $obj = $($obj); } $obj.on({ mousedown: function (e) { e.preventDefault(); var t = $obj.offset(), o = e.pageX - t.left, i = e.pageY - t.top; $(document).on("mousemove.drag", function (e) { $obj.offset({ top: e.pageY - i, left: e.pageX - o }) }) }, mouseup: function () { $(document).unbind("mousemove.drag") } }); };//drag
在页面加载完时就执行drag操作:
$(function(){ drag("#subPagePanel"); });
看看效果:
今天又进行了优化:
drag = function ($obj, hn) { if (arguments.length == 0) { return; } if ($obj == null || $obj == undefined) { return; } if (typeof $obj == 'string') {//when $obj is a string $obj = $($obj); } var $hn = null; if (arguments.length > 1) { $hn = $obj.find(hn);//div h1,h2... } else { $hn = $obj.find("h2"); } $hn.on({ mousedown: function (e) { e.preventDefault(); var t = $obj.offset(), o = e.pageX - t.left, i = e.pageY - t.top; //$obj.css("position", 'fixed'); $(document).on("mousemove.drag", function (e) { $obj.offset({ top: e.pageY - i, left: e.pageX - o }) }) }, mouseup: function () { $(document).unbind("mousemove.drag"); $obj.css("position", 'fixed'); } }); };//drag
下面的方法是让对话框显示出来:
var ajaxSubPanel=function(url) { $subContent=$("#subContent"); showLoadPanel(server_url_prefix+"static/img/loading/progress.gif"); ajaxHtml(url+"&recordsPerPage=5&random22="+Math.random(),$subContent);//page.js $subPagePanel = $('#subPagePanel'); //$subPagePanel.css("position", 'absolute');//保证下面的语句生效 $subPagePanel.css("top", (/*com.whuang.hsj.getScroll().top+*/10) + "px");//弹出panel兼容滚动条 $cboxOverlay.height($(document).height()); $cboxOverlay.show(); $subPagePanel.show('normal'); $subPagePanel.css("position", 'fixed');//保证固定在可视范围内 };
相关推荐
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
点击链接弹出一个可拖动的小窗口,按esc键可关闭小窗口
原生js仿照百度的登录,点击弹出登录窗口,同时可以拖拽,并有兼容性问题的解决
1,javascript面向对象技术做的Div窗口,可拖动,可改变大小 2,弹出提示消息窗口,类似QQ在屏幕右下角弹出的小提示窗口
ymPrompt4.0 弹出窗 拖动层 跟大家分享
js可拖拽最大最小化弹出层窗口是一款窗口可以拖动,可以通过八个方向改变大小,可以最小化、最大化、还原、关闭,支持限制窗口最小宽度高度。
QML弹出窗口组件,灯箱效果、动画效果,可拖拽 核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透,动画效果 http://www.cnblogs.com/surfsky/p/3998391.html
Ajax弹出漂亮可拖动的提示层(窗)效果
网页特效-窗口特效-兼容IE和Firefox的可拖动弹出登陆窗口
支持各种HTML的填充方式,里面有4种弹出的demo可供选择,是一个不错的弹出Div的解决方案。 再项目中我运用到了!
本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明: 1、点击页面按钮,弹出窗口; 2、要有半透明背景遮罩; 3、弹出窗口圆角,窗口半透明,但内容不透明;带阴影...
Web弹窗,支持移动、拖拽、缩放大小、自适应页面,下载后可以直接使用。
模拟一个弹出可拖动的层窗口源码(效果超酷) 模拟一个弹出可拖动的层窗口源码(效果超酷)
一个弹出课拖动的div层窗口,界面简单漂亮大气,各种颜色。适合网站开发
jQuery可拖动的弹出登录窗口代码
弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认) 弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认)
Android自定义SeekBar,优化了拖动时可弹出跟随窗口显示进度
1.可拖动,默认窗口居中 2.可以自定义弹出层大小 3.背景变暗,不可编辑 4.边框半透明,圆角,内容部分不透明。 5.兼容IE、chrome、firefox等
1.可拖动,默认窗口居中 2.可以自定义弹出层大小 3.背景变暗,不可编辑 4.边框半透明,圆角,内容部分不透明。 5.兼容IE、chrome、firefox等