<!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; width: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>