利用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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
Vue.js动态组件解析
Sep 09 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
js实现菜单跳转效果
Dec 11 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue实现简单分页器
2018/12/29 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python中正则表达式 re.findall 用法
2018/10/23 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
python 写一个性能测试工具(一)
2020/10/24 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
国家奖学金获奖感言
2014/08/16 职场文书
销售经理岗位职责
2015/01/31 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
长征观后感
2015/06/09 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server