明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

如何能做出可以拖動的DIV層提示窗口

發(fā)表時間：2023-12-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]今天給大家整理一下點擊彈出可拖動的DIV層代碼，大家可以來看一下。具體代碼如下（復制即可使用）： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten...
今天給大家整理一下點擊彈出可拖動的DIV層代碼，大家可以來看一下。

具體代碼如下（復制即可使用）： 

 <!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"; // 提示內(nèi)容的背景色 
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 '宋體';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 '宋體';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='font-size:15pt; color:"+titlecolor+";'>×</span>"; 
closeBtn.onclick = function(){ 
document.body.removeChild(bgObj); 
document.body.removeChild(msgObj); 
} 
var msgBox = table.insertRow(-1).insertCell(-1); 
msgBox.style.cssText = "font:10pt '宋體';"; 
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('演示','我是<a href=\'http://www.divcss5.com\'>CSS</a>內(nèi)容300是寬度200是高度',300,200);" /> 
</body> 
</html>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

駝峰命名與JS的問題解答

前端的js框架總結(jié)以及用途講解

JS里的布爾值、關(guān)系運算符、邏輯運算符的詳解及實例

以上就是怎樣能做出可以拖動的DIV層提示窗口的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。