So erstellen Sie ein ziehbares DIV-Layer-Eingabeaufforderungsfenster-HTML-Tutorial-php.cn

So erstellen Sie ein ziehbares DIV-Layer-Eingabeaufforderungsfenster

php中世界最好的语言

Freigeben： 2017-12-16 10:39:09

Original

1744 Leute haben es durchsucht

Heute werde ich den DIV-Layer-Code sortieren, der angeklickt und gezogen werden kann. Sie können einen Blick darauf werfen.

Der spezifische Code lautet wie folgt (kopieren und verwenden):

 <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIVCSS5可拖动DIV提示窗口</title> 
<script language="javascript"> 
function alertWin(title, msg, w, h){ 
var titleheight = "22px"; // 提示窗口标题高度 
var bordercolor = "#666699"; // 提示窗口的边框颜色 
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色 
var titlebgcolor = "#666699"; // 提示窗口的标题背景色 
var bgcolor = "#FFFFFF"; // 提示内容的背景色 
var iWidth = document.documentElement.clientWidth; 
var iHeight = document.documentElement.clientHeight; 
var bgObj = document.createElement("div"); 
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; 
document.body.appendChild(bgObj); 
var msgObj=document.createElement("div"); 
msgObj.style.cssText = "position:absolute;font:11px &#39;宋体&#39;;top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;"; 
document.body.appendChild(msgObj); 
var table = document.createElement("table"); //www.divcss5.com divcss5
msgObj.appendChild(table); 
table.style.cssText = "margin:0px;border:0px;padding:0px;"; 
table.cellSpacing = 0; 
var tr = table.insertRow(-1); 
var titleBar = tr.insertCell(-1); 
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px &#39;宋体&#39;;color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor; 
titleBar.style.paddingLeft = "10px"; 
titleBar.innerHTML = title; 
var moveX = 0; 
var moveY = 0; 
var moveTop = 0; 
var moveLeft = 0; 
var moveable = false; 
var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5
var docMouseUpEvent = document.onmouseup; 
titleBar.onmousedown = function() { 
var evt = getEvent(); 
moveable = true; 
moveX = evt.clientX; 
moveY = evt.clientY; 
moveTop = parseInt(msgObj.style.top); 
moveLeft = parseInt(msgObj.style.left); 
document.onmousemove = function() { 
if (moveable) { 
var evt = getEvent(); 
var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5
var y = moveTop + evt.clientY - moveY; 
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) { 
msgObj.style.left = x + "px"; 
msgObj.style.top = y + "px"; 
} 
} 
}; 
document.onmouseup = function () { 
if (moveable) { 
document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5
document.onmouseup = docMouseUpEvent; 
moveable = false; 
moveX = 0; 
moveY = 0; 
moveTop = 0; 
moveLeft = 0; 
} 
}; 
} 
var closeBtn = tr.insertCell(-1); 
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor; 
closeBtn.innerHTML = "<span style=&#39;font-size:15pt; color:"+titlecolor+";&#39;>×</span>"; 
closeBtn.onclick = function(){ 
document.body.removeChild(bgObj); 
document.body.removeChild(msgObj); 
} 
var msgBox = table.insertRow(-1).insertCell(-1); 
msgBox.style.cssText = "font:10pt &#39;宋体&#39;;"; 
msgBox.colSpan = 2; 
msgBox.innerHTML = msg; 
// 获得事件Event对象，用于兼容IE和FireFox 
function getEvent() { 
return window.event || arguments.callee.caller.arguments[0]; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="DIVCSS5" onclick="alertWin(&#39;演示&#39;,&#39;我是<a href=\&#39;http://www.divcss5.com\&#39;>CSS</a>内容300是宽度200是高度&#39;,300,200);" /> 
</body> 
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie hier. Bitte beachten Sie die chinesische PHP-Website. Weitere verwandte Artikel!

Verwandte Lektüre:

Antworten auf Fragen zur Kamelfallbenennung und JS

Zusammenfassung des Front-End-JS-Frameworks und Erklärung seiner Verwendung

Detaillierte Erklärungen und Beispiele von Booleschen Werten, relationalen Operatoren und logischen Operatoren in JS

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein ziehbares DIV-Layer-Eingabeaufforderungsfenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!