<html> <head> <title>弹出窗口(可拖动,背景透明)</title> <script type="text/javascript"><!-- /*FileName:AlertMsg.js title:提示标题 content:提示的内容*/ document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>") function $(id){ return document.getElementById(id)} function AlertMsg(title){ var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg; //弹出窗口设置 msgw = 400; //窗口宽度 msgh = 200; //窗口高度 msgbg = "#FFF"; //内容背景 msgcolor = "#000"; //内容颜色 bordercolor = "#000"; //边框颜色 titlecolor = "#FFF"; //标题颜色 titlebg = "#369"; //标题背景 //遮罩背景设置 var sWidth,sHeight; sWidth = screen.availWidth; //sHeight = document.body.scrollHeight; sHeight = screen.availHeight; //创建遮罩背景 var maskObj = document.createElement("div"); maskObj.setAttribute('id','maskdiv'); maskObj.style.position = "absolute"; maskObj.style.top = "0"; maskObj.style.left = "0"; maskObj.style.background = "#777"; maskObj.style.filter = "Alpha(opacity=30);"; maskObj.style.opacity = "0.3"; maskObj.style.width = sWidth + "px"; maskObj.style.height = sHeight + "px"; maskObj.style.zIndex = "10000"; document.body.appendChild(maskObj); //创建弹出窗口 var msgObj = document.createElement("div") msgObj.setAttribute("id","msgdiv"); msgObj.style.position ="absolute"; msgObj.style.top = (screen.availHeight - msgh) / 4 + "px"; msgObj.style.left = (screen.availWidth - msgw) / 2 + "px"; msgObj.style.width = msgw + "px"; msgObj.style.height = msgh + "px"; msgObj.style.fontSize = "12px"; msgObj.style.background = msgbg; msgObj.style.border = "1px solid " + bordercolor; msgObj.style.zIndex = "10001"; //创建标题 var thObj = document.createElement("div"); thObj.setAttribute("id","msgth"); thObj.className = "DragAble"; thObj.title = "按住鼠标左键可以拖动窗口!"; thObj.style.cursor = "move"; thObj.style.padding = "4px 6px"; thObj.style.color = titlecolor; thObj.style.background = titlebg; var titleStr = "<a target=_blank class='close' title='关闭' οnclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>"; thObj.innerHTML = titleStr; //创建内容 var bodyObj = document.createElement("div"); bodyObj.setAttribute("id","msgbody"); bodyObj.style.padding = "10px"; bodyObj.style.lineHeight = "1.5em"; //var txt = document.createTextNode(content) var inputText=document.createElement("input"); inputText.setAttribute("id", "callInput"); inputText.setAttribute("type","text"); bodyObj.appendChild(inputText); //生成窗口 document.body.appendChild(msgObj); $("msgdiv").appendChild(thObj); $("msgdiv").appendChild(bodyObj); } function CloseMsg(){ //移除对象 document.body.removeChild($("maskdiv")); $("msgdiv").removeChild($("msgth")); $("msgdiv").removeChild($("msgbody")); document.body.removeChild($("msgdiv")); } //拖动窗口 var ie = document.all; var nn6 = document.getElementById&&!document.all; var isdrag = false; var y,x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className=="DragAble") { isdrag = true; oDragObj = oDragHandle.parentNode; nTY = parseInt(oDragObj.style.top); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left); x = nn6 ? e.clientX : event.clientX; document.onmousemove = moveMouse; return false; } } document.onmousedown = initDrag; document.onmouseup = new Function("isdrag=false"); //--></script> </head> <body> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="100" align="center"> <p><a target=_blank href="javascript:AlertMsg("温馨提示")" rel="nofollow">click me!</a></p></td> </tr> <tr> <td align="center"> <div style="height:600px"> <p>study</p> </div></td> </tr> <p> </p> </table> </body> </html> 效果图: