特效浮动层

<script type="text/javascript">
function makeSure(){
this.zzDiv = document.createElement("div");//遮照层
var h = document.body.offsetHeight == 0 ? document.documentElement.offsetHeight : document.body.offsetHeight;
this.zzDiv.style.cssText = "z-index:100;position:absolute;top:0px;left:0px;width:100%;filter:alpha(opacity=80);opacity:0.8;display:none;background:#EEE;height:" + h + "px;";
this.zzDiv.setAttribute("id","makeSureZZDiv");
this.divs = document.createElement("div");//遮照层上层
this.header = document.createElement("div");//拖动头
this.contenter = document.createElement("div");//内容层
this.contenter.style.cssText = "padding:10px;";
this.header.style.cssText = "height:20px;line-height:20px;padding-left:10px;margin:1px;background:#6699CC;cursor:move;"
this.divs.style.cssText="z-index:101;position:absolute;top:0px;left:0px;text-align:center;width:300px;height:300px;background:#EEE;border:1px solid #365899;display:none;"
this.divs.setAttribute("id","makeSureDiv");
document.body.appendChild(this.zzDiv);
this.divs.appendChild(this.header);
this.divs.appendChild(this.contenter);
document.body.appendChild(this.divs);
this.x;
this.y;
this.drayState = false;
}
makeSure.prototype = {
setZZDiv:function(state){//控制遮照打开还是隐藏
   if(state == "open")
   {
    this.zzDiv.style.display = "block";
   }
   else
   {
    this.zzDiv.style.display = "none";
   }  
},
divAlert:function(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag){//入口，打开遮照和确定层
   var _this = this;
   _this.setZZDiv("open");
   _this.setDiv(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag);
},
//setDiv:function(css,haveHeader,innerHTMLs,id,oDrag){//确定层信息控制
setDiv:function(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag){//确定层信息控制
   var _this = this;
   if(haveHeader == false)
   {
    _this.divs.removeChild(_this.header);
   }
   _this.setContentHTML(innerHTMLs);
   //_this.divs.innerHTML = innerHTMLs;
   _this.setHeaderInnerHTML(titles);
   _this.setHeaderCss(headerCss);
   _this.setCss(css);
   _this.divs.style.display = "block";
   _this.divs.style.position = "absolute";
   _this.divs.style.zIndex = 101;
   _this.divs.style.top = (document.documentElement.scrollTop+100) + "px";
　　_this.divs.style.left = (_this.zzDiv.offsetWidth/2 - _this.divs.offsetWidth/2) + "px";
   _this.$(id).style.cursor = "pointer";
   _this.$(id).onclick = function(){_this.divs.style.display = "none";_this.setZZDiv("close");};
   if(oDrag != false)
   {
    _this.$(oDrag).style.cursor = "move";
    _this.moveReady(oDrag);
    _this.moveReady(_this.header);
   }
   else
   {
    _this.moveReady(_this.header);
   }  
},
moveReady:function(o){　//拖动鼠标元素设定
   var _this = this;
   _this.$(o).onmousedown = function(e){  
    var e = e ? e : event;
    var mouseDown = document.all ? 1 : 0;
    if(e.button == mouseDown)
    {
     _this.x = e.clientX;
     _this.y = e.clientY;
     _this.dragState = true;    
    }
   }
   _this.$(o).onmouseup = function(){_this.dragState = false;}
   //_this.$(o).onmouseout = function(){_this.dragState = false;}
   //_this.$(o).onmouseover = function(){_this.dragState = true;}
   document.onmouseup = function(){_this.dragState = false;}

   document.onselectstart=function(){return false}
   document.onmousemove = function(e){
    var e = e ? e : event;
    if(_this.dragState == true)
    {   
     _this.dragBegin(e);
    }
    else
    {
    
    }
   }
},
dragBegin:function(e){　//拖动函数
  
   var _this = this;  
   var e = e ? e : event;  
   var mouseDown = document.all ? 1 : 0;
   if(e.button == mouseDown)
   {
  
    var x = e.clientX;
    var y = e.clientY;  
    if((_this.divs.offsetLeft + (x - _this.x) <= 0) || (_this.divs.offsetLeft + (x - _this.x) -　_this.divs.offsetWidth >= _this.zzDiv.offsetWidth))
    {
     //
     if(_this.divs.offsetLeft + (x - _this.x) -　_this.divs.offsetWidth >= _this.zzDiv.offsetWidth)
     {   
      _this.divs.style.left = _this.zzDiv.offsetWidth + "px";
     }
     else
     {
      _this.divs.style.left = "0px";
     }
    }
    else
    {    
     _this.divs.style.left = (_this.divs.offsetLeft + (x - _this.x)) + "px";
     //_this.divs.style.left = "0px";
    }
    _this.divs.style.top = (_this.divs.offsetTop + (y - _this.y)) + "px";  
    _this.x = x;
    _this.y = y;
    //alert(x);
   }
},
setHeaderInnerHTML:function(mes){　//设置头部内容
   if(mes != false)
   {
    this.header.innerHTML = mes;
   }  
},
setHeaderCss:function(css){　//设置头部css
   if(css != false)
   {
    this.header.style.cssText = "cursor:move;" + css;
   }
},
setContentHTML:function(mes){
   if(mes != false)
   {
    this.contenter.innerHTML = mes;
   }
},
setCss:function(css){
   if(css != false)
   {
    this.divs.style.cssText = css;
   }
},
$:function(o){//获取对象
   if(typeof(o) == "string")
   {
    if(document.getElementById(o))
    {
     return document.getElementById(o);
    }
    else
    {
     alert("errId \""+ o + "\"!");
     return false;
    }
   }
   else
   {
    return o;
   }
}

}
window.onload = function(){
   var c = new makeSure();

   haveHeader = true;
   innerHTMLs = "<span id='b'><br/><br>博客中心<br><a href='http://blog.csdn.net/fkedwgwy'>http://blog.csdn.net/fkedwgwy</a></span>";
   titles= "fkedwgwy<span id='a'>关闭</span>";
   css = false;
   headerCss = false;
   id="a";
   oDrag="b";    
   document.getElementById("sure").onclick = function(){
   c.divAlert(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag);}  
}
</script>
<input type="button" id="sure" value= "查看效果效果">