利用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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue.js实现简单购物车功能
May 30 Javascript
实例讲解React 组件
Jul 07 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
2.PHP入门
2006/10/09 PHP
PHP中实现进程间通讯
2006/10/09 PHP
php操作xml
2013/10/27 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
offsetParent 算法分析
2010/04/05 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
Java的基础面试题附答案
2016/01/10 面试题
在C#中如何实现多态
2014/07/02 面试题
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
海洋科学专业求职信
2014/08/10 职场文书
楚门的世界观后感
2015/06/03 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Python django中如何使用restful框架
2021/06/23 Python