利用js对象弹出一个层

 更新时间:2008年03月26日 21:43:03   作者:  
用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> 

相关文章

  • 分享十三个最佳JavaScript数据网格库

    分享十三个最佳JavaScript数据网格库

    数据网格可以帮助解决在 HTML 表格上对带有过滤、分页、排序、搜索以及内联编辑这些功能特性的大量数据集的处理问题,需要的朋友可以参考下
    2017-04-04
  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • "好玩的放大镜效果" 的另一种实现方法

    "好玩的放大镜效果" 的另一种实现方法

    "好玩的放大镜效果" 的另一种实现方法...
    2006-11-11
  • js鼠标、键盘事件实例代码

    js鼠标、键盘事件实例代码

    js 鼠标、键盘的几个事件的例子
    2008-07-07
  • 利用d3.js制作连线动画图与编辑器的方法实例

    利用d3.js制作连线动画图与编辑器的方法实例

    这篇文章主要给大家介绍了关于如何利用d3.js制作连线动画图与编辑器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用d3.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 移动端触摸滑动插件swiper使用方法详解

    移动端触摸滑动插件swiper使用方法详解

    这篇文章主要为大家详细介绍了移动端触摸滑动插件swiper的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js实现顶部可折叠的菜单工具栏效果实例

    js实现顶部可折叠的菜单工具栏效果实例

    这篇文章主要介绍了js实现顶部可折叠的菜单工具栏效果,可实现鼠标滑过菜单工具栏出现折叠与展开效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript定义简单的页面复选框实现全选操作

    JavaScript定义简单的页面复选框实现全选操作

    本文主要介绍了JavaScript定义简单的页面复选框实现全选操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JavaScript圣杯布局与双飞翼布局实现案例详解

    JavaScript圣杯布局与双飞翼布局实现案例详解

    这篇文章主要介绍了JavaScript圣杯布局与双飞翼布局实现案例,这是前端面试中需要掌握的知识点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • JS上传前预览图片实例

    JS上传前预览图片实例

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了。功能很简单,却很实用。
    2013-03-03

最新评论