<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li{ border-bottom:1px dashed gray;} </style> <script> window.onload=function(){ document.getElementById('btn').onclick=function(){ Form(); } function Form(){ //定义ID var bgDivID="bgDivID"; var formDivID="formDivID"; var TextareaID="TextareaID"; var formDivWidth=400; var formDivHeight=300; //浏览器宽高 和 滚动条 var clientWidth=document.documentElement.clientWidth||document.body.clientWidth; var clientHeight=document.documentElement.clientHeight||document.body.clientHeight; var scrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight; var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //半透明遮罩 var objBgDiv=document.getElementById(bgDivID); if(objBgDiv){ objBgDiv.style.display="block"; }else{ var bgDiv=document.createElement("div"); bgDiv.id=bgDivID; bgDiv.style.position="absolute"; bgDiv.style.left="0px"; bgDiv.style.top="0px"; bgDiv.style.width=clientWidth+'px'; bgDiv.style.height=clientHeight+scrollHeight+'px'; bgDiv.style.background="black"; bgDiv.style.opacity="0.5"; document.body.appendChild(bgDiv); objBgDiv=bgDiv; } //表单 var objFormDiv=document.getElementById(formDivID); if(objFormDiv){ objFormDiv.style.display="block"; objFormDiv.style.left=((clientWidth-formDivWidth)/2)+"px"; objFormDiv.style.top=(scrollTop+(clientHeight-formDivHeight)/2)+"px"; document.getElementById(TextareaID).value=""; document.getElementById(TextareaID).focus(); }else{ var formDiv=document.createElement("div"); formDiv.id=formDivID; formDiv.style.position="absolute"; formDiv.style.left=((clientWidth-formDivWidth)/2)+"px"; formDiv.style.top=(scrollTop+(clientHeight-formDivHeight)/2)+"px"; formDiv.style.background="white"; formDiv.style.width=formDivWidth+"px"; formDiv.style.height=formDivHeight+"px"; document.body.appendChild(formDiv); objFormDiv=formDiv; //标题栏 var titleDiv=document.createElement("div"); titleDiv.style.background="skyblue"; titleDiv.style.height="30px"; titleDiv.style.lineHeight="30px"; titleDiv.style.paddingLeft="10px"; titleDiv.style.color="white"; titleDiv.style.position="relative"; titleDiv.style.cursor="move"; titleDiv.innerHTML="标题栏"; formDiv.appendChild(titleDiv); //标题栏上的关闭按钮 var closeBtn=document.createElement("span"); closeBtn.innerHTML="关闭"; closeBtn.style.cursor="pointer"; closeBtn.style.position="absolute"; closeBtn.style.right="10px"; closeBtn.onclick=CloseForm; titleDiv.appendChild(closeBtn); //正文内容 var Text=document.createElement('p'); Text.innerHTML="请写入微博正文"; Text.style.paddingLeft="20px"; formDiv.appendChild(Text); //文本域 var P=document.createElement("p"); P.style.paddingLeft="20px"; formDiv.appendChild(P); var Textarea=document.createElement("textarea"); Textarea.id=TextareaID; Textarea.style.width="350px"; Textarea.style.height="90px"; Textarea.focus(); P.appendChild(Textarea); //提交按钮 P=document.createElement("p"); P.style.paddingLeft="20px"; formDiv.appendChild(P); var Button=document.createElement("input"); Button.type="button"; Button.value="发布"; Button.onclick=SubmitForm; P.appendChild(Button); } //标题栏的拖拽效果 var isDown=false; var mLeft, mTop; titleDiv.onmousedown=function(event){ event=event||window.event; isDown=true; mLeft=event.offsetX; mTop=event.offsetY; scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //鼠标移动时 document.onmousemove=function(event){ event=event||window.event; if(isDown){ var iL=event.clientX-mLeft; var iT=scrollTop+event.clientY-mTop; var maxL=clientWidth-formDiv.offsetWidth; var maxT=scrollTop+clientHeight-formDiv.offsetHeight; var minT=scrollTop; if(iL<0)iL=0; if(iT<minT)iT=minT; if(iL>maxL)iL=maxL; if(iT>maxT)iT=maxT; objFormDiv.style.left=iL+"px"; objFormDiv.style.top=iT+"px"; } } //鼠标松开时 document.onmouseup=function(){ isDown=false; document.onmousemove=null; document.onmouseup=null; } return false; } //关闭按钮 function CloseForm(){ objBgDiv.style.display="none"; objFormDiv.style.display="none"; } //提交表单 function SubmitForm(){ //检查表单是否合法 var objTextarea=document.getElementById(TextareaID); var textLength=objTextarea.value.length; if(textLength>150||textLength<6){ alert("内容长度不能大于150或小于6，当前长度为"+textLength); }else{ //把文本域值插入页面正文处 var li=document.createElement("li"); li.innerHTML=objTextarea.value var oUl=document.getElementById("oUl"); oUl.appendChild(li); //关闭 CloseForm(); } } } } </script> </head> <body style="height:4000px;"> <div id="btn" style="position:fixed; right:0px; bottom:0px; 100px; height:100px; line-height:100px; text-align:center; background:black; color:white; cursor:pointer;">添加</div> <ul id="oUl"> <li>第一条</li> <li>第二条</li> <li>第三条</li> <li>第四条</li> </ul> </body> </html>