<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#win{
left: 500px;
300px;
height: 250px;
margin: 200px auto;
border: 3px solid #CCC;
display: none;
position: absolute;
}
#title{
300px;
height: 50px;
background: #FFFF99;
text-align: center;
line-height: 50px;
position: relative;
}
#title span{
20px;
height: 20px;
display: block;
position: absolute;
top: 0;
right: 0;
background: red;
text-align: center;
line-height: 20px;
cursor: pointer;
}
#qqq{
100%;
height: 100%;
background: #CCC;
opacity: .4;
position: absolute;
top: 0;
left: 0;
display: none;
}
b{
display: block;
800px;
height: 50px;
margin-top:10px;
background: #38f;
border: 1px solid #3388FF;
border-radius: 10px;
}
#w{
display: block;
800px;
margin-left: 200px;
height: 50px;
background: #38f;
border: 1px solid #3388FF;
border-radius: 10px;
line-height: 50px;
}
#list a{
text-decoration: none;
}
#list li{
list-style:none;
}
#list{
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="boss">
<a href="#" id="lond">登录</a>
<span id="w">
邻村少女为何深夜失声尖叫
</span>
<div id="qqq"></div>
<div id="win">
<div id="title"><p id="mp">标题</p><span id="cu">X</span></div>
<textarea id="text" rows="10" cols="40"></textarea>
<input type="button" value="发送" id="go"/>
<input type="button" value="取消" id="false"/>
</div>
<ul id="list">
<li><a href="#">关闭</a></li>
</ul>
</div>
<script type="text/javascript">
var oBoss = document.getElementById('boss')
var oA = document.getElementById('lond');
var oQ = document.getElementById('qqq');
var oWin = document.getElementById('win');
var oTitle = document.getElementById('title');
var oCu = document.getElementById('cu');
var oFalse = document.getElementById('false');
var oGo = document.getElementById('go');
var oText = document.getElementById('text');
var oW = document.getElementById('w')
var oP = document.getElementById('mp')
var olist = document.getElementById('list')
oA.onclick = function(){
oQ.style.display = 'block'
oWin.style.display = 'block'
}
oCu.onclick =function(){
oQ.style.display = 'none'
oWin.style.display = 'none'
}
oFalse.onclick = function(){
oQ.style.display = 'none'
oWin.style.display = 'none'
oText.value= null
}
oTitle.onmousedown = function(ev){
ev = ev || event;
var x = ev.clientX - oWin.offsetLeft ;
var y = ev.clientY - oWin.offsetTop+200 ;
document.onmousemove = function( ev ){
ev = ev || event;
var x1 = ev.clientX - x;
var y1 = ev.clientY - y;
oWin.style.left = x1 + 'px';
oWin.style.top = y1 + 'px';
};
};
document.onclick = function(){
olist.style.display= 'none'
}
oTitle.oncontextmenu = function(ev){
ev = ev||event;
olist.style.cssText = 'display:block;left:'+ev.clientX+'px;top:'+ev.clientY+'px;';
return false;
}
olist.onclick = function(){
oQ.style.display = 'none'
oWin.style.display = 'none'
olist.style.display= 'none'
}
oTitle.onmouseup = function(){
document.onmousemove = null;
};
oGo.onclick = function(){
var val = oText.value
if(val){
if(oText.value.length <= 150){
var oB =document.createElement('b')
var ob = document.createTextNode(val)
oB.appendChild(ob);
oW.appendChild(oB);
oText.value=null;
oQ.style.display = 'none'
oWin.style.display = 'none'
}else{
alert('内容超过150字')
}
}else{
alert('内容不能不空')
}
}
oP.onselectstart = function(){
return false
}
</script>
</body>
</html>