드래그할 수 있는 팝업 층 (최대화, 최소화, iframe/HTML)
//
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);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.