利用js对象弹出一个层


Posted in Javascript onMarch 26, 2008
<!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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 #Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 #Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 #Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 #Javascript
Javascript的一种模块模式
Mar 22 #Javascript
You might like
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python计算字符宽度的方法
2016/06/14 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
python 制作磁力搜索工具
2021/03/04 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
求职意向书
2014/04/01 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
被委托人身份证明
2015/08/07 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js