遮照确定封装类
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:#FFF;cursor:move;"
this.divs.style.cssText="z-index:101;position:absolute;top:0px;left:0px;text-align:center;width:200px;height:150px;background:#EEE;border:1px solid #CCC;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(css,haveHeader,innerHTMLs,id,oDrag){//入口，打开遮照和确定层
var _this = this;
_this.setZZDiv("open");
_this.setDiv(css,haveHeader,innerHTMLs,id,oDrag);
},
setDiv:function(css,haveHeader,innerHTMLs,id,oDrag){//确定层信息控制
var _this = this;
if(haveHeader == false)
{
_this.divs.innerHTML = innerHTMLs;
}
else
{
_this.contenter.innerHTML = innerHTMLs;
}
//_this.divs.innerHTML = innerHTMLs;
if(css != null)
{
_this.divs.style.cssText += css;
}
_this.divs.style.display = "block";
_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){ //设置头部内容
this.header.innerHTML = mes;
},
setHeaderCss:function(css){ //设置头部css
this.header.style.cssText += css;
//alert(this.header.style.cssText);
},
$:function(o){//获取对象
if(typeof(o) == "string")
{
if(document.getElementById(o))
{
return document.getElementById(o);
}
else
{
alert("errId \""+ o + "\"!");
return false;
}
}
else
{
return o;
}
}
}
使用方法
2.在页面的"</body>"标签前加入以下代码:
window.onload = function(){
var c = new makeSure();
haveHeader = "true";//是否有标题栏
innerHTMLs = "<span id='b'>移动</span><br/><span id='a'>关闭</span>";//内容
titles="标题";//标题内容
css = false;//外框的css
headerCss = false;//标题的css
id="a";//点击关闭对象的id
oDrag="b";//点击拖动对象的id
document.getElementById("sure").onclick = function(){
c.divAlert(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag);}
}
</script>
haveHeader:是否有标题栏 (true:有 , false:无)
innerHTMLs:主体内部内容
titles:标题的内容 (如果没有则设为false)
css://主体css (如果没有则设为false)
headerCss:标题的css (如果没有则设为false)
id:点击关闭对象的id(在innerHTMLs中的元素的id,用于关闭已经打开的层,以上代码中红色部分)
oDra:点击可以拖动对象的id(以上代码中绿色部分)
