Welcome 微信登录

首页 / 脚本样式 / JavaScript / 利用js对象弹出一个层

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>脚本之家-弹出一个层</title> 
<script language="javascript"> 
function cmsgbox(vtitle,vwidth,vhight,vtop,vleft) 

 this.title=vtitle; 
 this.width=vwidth; 
 this.height=vhight; 
 this.top=vtop; 
 this.left=vleft; 
 this.id=0; 

cmsgbox.prototype.showdiv=function() 

 var str=""; 
 str+="<div id="div1" style="z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:"+this.vleft+"px;top:"+this.vtop+"px;width:"+this.width+"px;">"; 

 str+="<div style="padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;" >"; 
 str+=" <div style="float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:"+(parseInt(this.width)-24*2-5)+"px;">"+this.title+"</div>"; 
 str+=" <span style="width:14px;font-family:webdings;cursor:hand;">0</span>"; 
 str+=" <span style="width:14px;font-family:webdings;cursor:hand;"  onclick="cmsgbox.closediv(this);">r</span>"; 
 str+="</div>"; 

 str+="<div style=" margin:10px 5px 10px 10px;word-break:break-all;">"; 
 str+="xxx"; 
 str+="</div>"; 
 str+="</div>"; 
 //document.write(str); 
 document.body.insertAdjacentHTML("beforeEnd",str); 

/////////////////////窗口显示////////////////////////////// 
function show() 

 var box=new cmsgbox("小家伙呀",400,300); 
 box.showdiv(); 

</script> 
</head> 

<style> 
body{ 
 font-size:12px; 

</style> 
<body> 
<p onclick="show();">弹了一个层</p> 
</body> 
</html>