<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script>
function showMesg(){
document.getElementById("dianwo").href="javascript:void(0)";//解决反复点击的问题
var msgw,msgh,bordercolor;
msgw=200;//提示窗口的宽度
msgh=200;//提示窗口的高度
bordercolor="#8EB2E9";//提示窗口的边框颜色
var buttonArea = document.getElementById("dianwo");
var divLeft = buttonArea.offsetLeft+buttonArea.offsetWidth;
var divTop = buttonArea.offsetTop+buttonArea.offsetHeight;
//var divLeft = buttonArea.offsetLeft;
//var divTop = buttonArea.offsetTop;
var msgObj=document.createElement("div")//创建一个div对象(提示框层)
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid "+bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = divLeft;
msgObj.style.top = divTop;
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
msgObj.style.overflowY = "auto";
msgObj.style.overflowX = "auto";
msgObj.onblur = function(){ //点击空白处关闭弹出层
if(document.activeElement.id!="button"){//解决点击层内非法关闭问题
document.getElementById("dianwo").href="javascript:showMesg();";
document.body.removeChild(msgObj);//删除提示框层
}
}
var button=document.createElement("input");//创建一个input对象(提示框按钮)
button.setAttribute("type","button");
button.setAttribute("value","确定");
button.style.width="60px";
button.style.align="center";
button.style.background=bordercolor;
button.style.border="1px solid "+ bordercolor;
button.style.color="white";
button.οnclick=confirm;
function confirm(){
var testArea = document.getElementById("testArea");
testArea.focus();
sel = document.selection.createRange();
sel.text = "测试";
sel.select();
document.getElementById("dianwo").href="javascript:showMesg();";//解决反复点击的问题
document.body.removeChild(msgObj);//删除提示框层
}
document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
var strTable='<table><tr><td style="white-space:nowrap;overflow:hidden;">闪电狗</td></tr><tr><td>闪电狗</td></tr></table>';//style="white-space:nowrap;overflow:hidden;"解决了td强制换行的问题
var strText=strTable;
var txt=document.createElement("p");//创建一个p对象(提示框提示信息)
//txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=strText;//来源于函数调用时的参数值
document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button
}
</script>
</head>
<body>
<textarea id = "testArea" cols="100"></textarea> <a href= "javascript:showMesg();" id ="dianwo">点我</a>
</body>
</html>