<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 300px;margin: 100px auto;position: relative;}
p{width: 300px;line-height: 60px;text-align: center;background-color: #ccc;border-radius: 5px;margin-top: 5px;}
#box1{width: 250px;height: 150px;position: absolute;top: 100px;left: 25px;background-color: whitesmoke;margin: 0 auto;display: none;}
h3{width: 250px;height: 30px;line-height: 30px;text-align: center;background-color: orange;margin: 0;padding: 0;}
#area{width: 230px;background-color: white;margin-left: 10px;height:110px;}
</style>
</head>
<body>
<div id="box">
<p>你好</p>
<p>我好</p>
<p>大家好</p>
<div id="box1">
<h3 id="oh3">弹出窗口</h3>
<textarea id="area"></textarea>
<input type="button" name="btn1" id="btn1" value="确定" />
<input type="button" name="btn2" id="btn2" value="取消" />
</div>
</div>
<input type="button" name="btn" id="btn" value="添加" />
</body>
<script type="text/javascript">
var oh3 = document.querySelector("#oh3")
var obox = document.querySelector("#box")
var obox1 = document.querySelector("#box1")
var oarea = document.querySelector("#area")
var obtn1 = document.querySelector("#btn1")
var obtn2 = document.querySelector("#btn2")
var obtn = document.querySelector("#btn")
btn.onclick = function(){
obox1.style.display="block";
obtn1.onclick = function(){
var op = document.createElement("p")
obox.appendChild(op)
if(oarea.value.length<150){
op.innerHTML=oarea.value;
oarea.value=""
}else{
op.style.display="none"
}
}
oarea.onkeydown= function(eve){
var e = eve || window.event;
if(e.keyCode==13){
var op = document.createElement("p")
obox.appendChild(op)
if(oarea.value.length<150){
op.innerHTML=oarea.value;
oarea.value=""
}else{
op.style.display="none"
}
}
}
obtn2.onclick = function(){
obox1.style.display="none"
}
oh3.addEventListener("mousedown",fn1)
function fn1 (eve){
e1=eve||window.event;
oh3.addEventListener("mousemove",fn2)
function fn2(eve){
e2=eve||window.event;
obox1.style.left=e2.pageX-e1.offsetX-650+"px";
obox1.style.top=e2.pageY-e1.offsetY-96+"px";
}
oh3.addEventListener("mouseup",fn3)
function fn3(eve){
e3=eve||window.event;
oh3.removeEventListener("mousemove",fn2)
}
}
}
</script>
</html>
