利用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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
小程序双头slider选择器的实现示例
Mar 31 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/12/30 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python中zip和unzip数据的方法
2015/05/27 Python
python构建自定义回调函数详解
2017/06/20 Python
Java及python正则表达式详解
2017/12/27 Python
Python引用计数操作示例
2018/08/23 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
中学教师请假制度
2014/02/03 职场文书
安全保证书范文
2014/04/29 职场文书
医院节能减排方案
2014/06/13 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
服务整改报告
2014/11/06 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
python requests模块的使用示例
2021/04/07 Python
vue使用watch监听属性变化
2022/04/30 Vue.js