//拖拽对象 function drag(elementToDrag, event) { var startX = event.clientX, startY = event.clientY; var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; var deltaX = startX - origX, deltaY = startY - origY; if (document.addEventListener) { document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { elementToDrag.setCapture(); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); elementToDrag.attachEvent("onlosecapture", upHandler); } else { var oldmovehandler = document.onmousemove; var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true; if (event.preventDefault) event.preventDefault(); else event.returnValue = false; function moveHandler(e) { if (!e) e = window.event; elementToDrag.style.left = (e.clientX - deltaX) + "px"; elementToDrag.style.top = (e.clientY - deltaY) + "px"; if(e.clientX - deltaX<0)elementToDrag.style.left = "0px";//out of screen if(e.clientY - deltaY<0)elementToDrag.style.top = "0px";//out of screen if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } function upHandler(e) { if (!e) e = window.event; if (document.removeEventListener) { document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) { elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); } else { document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } } //window 弹出层 var win = function() { this.imageURL = "http://www.gpsoo.net/dealer/images/"; this.nullUrl = "http://www.gpsoo.net/images/"; }; win.prototype.openWinLayer = function(title, htmlStr, width, height, contentType, win, callback) { overWindow = win; this.closeWinLayer(); var title = '<div id="tit" onmousedown=\'drag(document.getElementById("openWinLayerDIV"),event)\' style="height:24px;background:#2b98cd;color:#FFF;cursor:move;"><div style="float:left;width:auto;padding-left:10px;height:24px;line-height:24px;font-size:12px;font-weight:bold;">' + title + '</div><div style="float:right;padding-right:4px;padding-top:3px;"><a style="cursor:pointer;" onclick="win.minWinLayer(\'' + title + '\');"><img src="' + this.imageURL + 'iw_min.gif" border="0" /></a><a><img src="' + this.nullUrl + 'null.gif" width="5" height="14" border="0" /></a><a style="cursor:pointer;" onclick="win.closeWinLayer();"><img src="' + this.imageURL + 'iw_close.gif" border="0" /></a></div></div>'; var contentDiv = top.document.createElement("div"); contentDiv.style.width = (width - 2) + "px"; contentDiv.style.height = (height - 28) + "px"; if (contentType == 2) { var temp = "<iframe width='100%' style='height:" + (height - 28) + "px' name='openWinLayerIframe' id='openWinLayerIframe' src='" + htmlStr + "' frameborder='0' scrolling='" + 'auto' + "'></iframe>"; contentDiv.innerHTML = temp; } else { contentDiv.innerHTML = htmlStr; } var container = document.createElement("div"); container.id = "openWinLayerDIV"; container.style.width = width + "px"; container.style.height = height + "px"; container.style.position = "absolute"; container.style.zIndex = 100; container.style.border = "5px solid #abbed8"; container.style.fontSize = "13px"; container.style.opacity = "0.98"; container.style.filter = 'alpha(opacity=98)'; container.style.top = (((document.documentElement.clientHeight - height) / 2) + document.documentElement.scrollTop) + "px"; container.style.left = (document.documentElement.clientWidth - width) / 2 + "px"; container.style.backgroundColor = "#fff"; container.innerHTML = title; container.appendChild(contentDiv); document.body.appendChild(container); }; win.prototype.closeWinLayer = function() { var _openLayer = top.document.getElementById("openWinLayerDIV"); if (_openLayer != null) { _openLayer.parentNode.removeChild(_openLayer); } var _openLayer_maxmin = top.document.getElementById("openWinLayerDIV_maxmin"); if (_openLayer_maxmin != null) { _openLayer_maxmin.parentNode.removeChild(_openLayer_maxmin); } }; win.prototype.minWinLayer = function(title) { var _openLayer = top.document.getElementById("openWinLayerDIV"); if (_openLayer != null) { _openLayer.style.display = "none"; } var title = '<div onmousedown=\'drag(document.getElementById("openWinLayerDIV_maxmin"),event)\' style="height:24px;background:#2b98cd;color:#FFF;cursor:move;"><div style="float:left;width:auto;padding-left:10px;height:24px;line-height:24px;font-size:12px;font-weight:bold;">' + title + '</div><div style="float:right;padding-right:4px;padding-top:3px;"><a style="cursor:pointer;" onclick="win.maxWinLayer();"><img src="' + this.imageURL + 'iw_max.gif" border="0" /></a><a><img src="' + this.nullUrl + 'null.gif" width="5" height="14" border="0" /></a><a style="cursor:pointer;" onclick="win.closeWinLayer();"><img src="' + this.imageURL + 'iw_close.gif" border="0" /></a></div></div>'; var contentDiv = top.document.createElement("div"); contentDiv.id = "openWinLayerDIV_maxmin"; contentDiv.style.width = "200px"; contentDiv.style.height = "24px"; contentDiv.style.border = "2px solid #abbed8"; contentDiv.style.position = "absolute"; contentDiv.style.zIndex = 100; contentDiv.style.fontSize = "13px"; contentDiv.style.top = ((document.documentElement.clientHeight - 40) + document.documentElement.scrollTop) + "px"; contentDiv.style.left = "10px"; contentDiv.innerHTML = title; document.body.appendChild(contentDiv); }; win.prototype.maxWinLayer = function() { var _openLayer_maxmin = top.document.getElementById("openWinLayerDIV_maxmin"); if (_openLayer_maxmin != null) { _openLayer_maxmin.parentNode.removeChild(_openLayer_maxmin); } var _openLayer = top.document.getElementById("openWinLayerDIV"); if (_openLayer != null) { _openLayer.style.display = "block"; } }; var win = new win();//创建win对象 //调用: //win.openWinLayer("窗口名称","http://www.baidu.com",300,150,2,window,null);
详细解决方案
可以拖拽的弹出层(并兑现最大化,最小化,iframe/HTML)
热度:798 发布时间:2012-10-08 19:54:56.0
相关解决方案
- 访问Tomcat的url的时候如何自动调用index.html
- The requested resource (/webtest/servlet/hello.html) is not availabl 帮忙解决解决方法
- JSP 页面乱码 页面起首已设置 contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
- iframe 子页刷新父页有关问题 大神请帮忙看看
- html js不运行有关问题
- 办公自动化系统——议程管理(用jsp+servlet+js+html+jdbc)怎样实现
- <html:text>property的有关问题
- 关于<html:text>相关的有关问题
- Struts 1.2 html:form的action和form的action区别,还有如果2个都有执行哪个解决方案
- 简单计算器(html+js),该怎么解决
- Iframe 的使用有关问题
- jsp页面放在html《iframe》中中文没法正常显示 单独是可以显示正常的O(∩_∩)O~该怎么解决
- HTML 小疑点,哪位高手解决 给哪位高手分
- 嵌入JSP中的CSS显示效果和在 HTML 中的不一样.为什么.该怎么解决
- struts1 中<html:checkbox>标签的value值怎么动态赋值
- 新人求问,J2EE方向,html,css,javascript,vml要学到什么程度?解决思路
- :前台和后台开发有啥区别?还有css、html、ajax、js、jquery都有什么区别
- 请问一个页面有关问题-iframe
- struts <html:file> 怎么让前面的框消失,先谢过了
- =Html.TextAreaFor的文本区域大小如何设置
- 正则表达式 提取 html 标签的内容,该如何解决
- @Html.CkEditor,该怎么处理
- string msg = (string)html.ViewData["Message"];该如何处理
- html password editbox 编码有关问题
- @Html.TextBoxFor(a => a.Title 上边有红线,说异常
- iframe 鼠标打击有关问题
- 关于伪静态,怎么配置.html
- AJAX 的TabContainer控件 嵌套 iframe 标签页 标签页面过长时自动顺应
- iframe 中使用UEditor有关问题
- MVC中,Html.DropDownListFor怎么绑定数据