javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js层

利用js对象弹出一个层

作者:

用js实现弹出层效果,一般用于代替alert

复制代码 代码如下:

<!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> 

阅读全文