利用js对象弹出一个层

代码如下:

<!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>

赞 (0)

相关推荐

  • 利用js对象弹出一个层

    复制代码 代码如下: <!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=

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • jquery原创弹出层折叠效果点击折叠弹出一个层

    jquery原创弹出层折叠效果点击折叠弹出一个层

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

  • javascript弹出一个层并增加一个覆盖层

    复制代码 代码如下: <!--内容层--> <div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;"> <input name="button1" value="关闭" type="

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • JS控制弹出悬浮窗口(一览画面)的实例代码

    JS控制弹出悬浮窗口(一览画面)的实例代码

    在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

  • js实现鼠标移到链接文字弹出一个提示层的方法

    本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • jQuery实现鼠标移到某个对象时弹出显示层功能

    本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能.分享给大家供大家参考,具体如下: /** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮动在这个元素旁边的层 div.css("position", "absolute");//让这个层可以绝对定位 var

  • js登录弹出层特效

    复制代码 代码如下: <!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=&qu

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!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">

随机推荐