`

按钮下方弹出层

 
阅读更多
<html>
	<head>
<SCRIPT>
function show(){
	window.event.cancelBubble = true
	var divId=document.getElementById("div1");
	var ob=document.getElementById("sss");
  
	var rd=getPosition(ob);
	
    
	divId.style.left=rd.x;
	divId.style.top=rd.y+ob.offsetHeight;
	divId.style.width=ob.offsetWidth;
	divId.style.heigth="800";
	divId.style.background = '#FFFFFF';
	divId.style.display="block";
}
function hideDiv(){
	var divId=document.getElementById("div1");
	if(!checkEventObj(event.srcElement,"div1"))
		divId.style.display="none";
}
function checkEventObj(obj,idName){
	if(obj.tagName == "BODY"){ return false; }
	if(obj.id == idName){ return true; }
	else{ return checkEventObj(obj.parentElement, idName); }
}


// 得到对象的绝对坐标
function getPosition(htmlObj){
   
    var  rd = {x:0,y:0};
    while(htmlObj)
	{  
        rd.x  +=  htmlObj.offsetLeft;   
        rd.y  +=  htmlObj.offsetTop;
        htmlObj= htmlObj.offsetParent;
    }
    
	return  rd;
}


</SCRIPT>
		
	</head>
	<body onclick =hideDiv()>
		 <input type="button" id="sss" value="testddddd" onclick="show()"/>
		 <div id="div1" style="display:none;
BORDER: #000 1px solid;
POSITION: absolute;
">
		  
		  ss<br>
		  bb<br>
		  cc<br>
		  cc<br>
		  cc<br>
		   	
		 </div>
	</body>
</html>


分享到:
评论

相关推荐

    html5手机端点击弹出层

    html5手机端点击弹出层

    利用JQuery制作符合Web标准的QQ弹出消息

    基本思路是这样子滴:首先弹出消息框其实就是一个div层,页面加载完了以后我们应该通过CSS把div层定位到页面右下角的下方,并且把他隐藏起来,然后当我们点击页面中的按钮的时候就触发动画函数,div层开始从下往上升,在...

    protel印制电路板设计:元件封装放置与布局调整.ppt

    Protel 印制电路板设计 第9讲 PCB设计基础及简单PCB设计 主 要 内 容 一、PCB编辑器 二、PCB设计基本组件 三、PCB工作层 四、规划PCB... * 双击元件,屏幕弹出图示的元件属性对话框,可以修改元件属性。 * 2.手工移动元

    用c描述的数据结构演示软件

    此算法演示可求得所有可行结果,在求得每一种排布的结果之后,均会弹出一个窗口显示“找到第 j (j=1,2,…) 种排布”,单击“确定”按钮将继续进行,直至找到所有可能构成的排布。 6. 背包问题 右侧图示窗口的上方...

    数据结构演示软件

    此算法演示可求得所有可行结果,在求得每一种排布的结果之后,均会弹出一个窗口显示“找到第 j (j=1,2,…) 种排布”,单击“确定”按钮将继续进行,直至找到所有可能构成的排布。 6. 背包问题 右侧图示窗口的...

    「《计算机动画》在线作业」.doc

    (6)如果想解除引导,可以把被引导层拖离"引导层",或在图层区的引导层 上单击右键,在弹出的菜单上选择【属性】,在对话框中选择"正常",作为正常图 层类型,如图3-6-4所示。 (7)如果想让对象作圆周运动,可以在...

    北师大网络教育《计算机动画》在线作业Word版.doc

    (6)如果想解除引导,可以把被引导层拖离"引导层",或在图层区的引导层上单击右键 ,在弹出的菜单上选择【属性】,在对话框中选择"正常",作为正常图层类型。 (7)如果想让对象作圆周运动,可以在"引导层"画一根...

    北师大网络教育《计算机动画》在线作业.doc

    (6)如果想解除引导,可以把被引导层拖离"引导层",或在图层区的引导层上单击右键,在 弹出的菜单上选择【属性】,在对话框中选择"正常",作为正常图层类型。 (7)如果想让对象作圆周运动,可以在"引导层"画一根圆形线条,再...

    flash cs5上机试题

     设置“下一个场景”按钮的“弹起”状态的填充色为#808080;“指针经过”状态的填充色为#C0EA15;“按下”状态的颜色为#4722DD。 4. 为按钮添加动作语句  回到“场景1”中,新建一个图层,并命名为“按钮”,将...

    c语言数据结构算法演示(Windows版)

    此算法演示可求得所有可行结果,在求得每一种排布的结果之后,均会弹出一个窗口显示“找到第 j (j=1,2,…) 种排布”,单击“确定”按钮将继续进行,直至找到所有可能构成的排布。 6. 背包问题 右侧图示窗口的上方...

    pyuiEdit:一种重组pyui文件的工具

    启动时,会出现一个文件选择弹出窗口,上半部分是目录选择器,下半部分是文件选择器。 仅显示“pyui”和“json”文件类型。 选择后,ui 将在屏幕右上角的视图中示意性显示,其视图列表作为右侧的 ListView 显示。 ...

    毕业设计电商网站源码-onlinestore:在线商城系统

    毕业设计电商网站源码 在线商城系统 简介 运行在Tomcat 7.0的网站工程,前台用了jsp、js、css等技术,后台用了Servlet作控制器调用...否则,弹出错误提示并刷新注册页面。 登录 登录页面是本站入口,通过地址 填写用户

    Toad 使用快速入门

    TOAD提供语法标识、错误标识和其他很多易于使用的功能,如在弹出窗口显示表名、列名和Oracle函数。和其他的 PL/SQL 编辑工具不同,TOAD 允许在一个文件中操作多个数据库对象,可以编译一个对象、编译多个对象、编译...

    Tab Freezer-crx插件

    ### Tab Freezer的最初想法是防止不必要的弹出窗口和新标签在不可见的覆盖层上单击。 通过单击选项卡栏右侧的“ Tab Freezer”图标,为一个选项卡激活“ Tab Freezer”。 再次单击以禁用。 激活后,此选项卡中的所有...

    硕士生,博士生论文排版技巧方法

    光标移到第二章,这时可以看到第二章的页眉和第一章是相同的,鼠标双击页眉Word会弹出页眉页脚工具栏,工具栏上有一个“同前”按钮(图像按钮,不是文字),这个按钮按下表示本节的页眉与前一节相同,我们需要的是各...

    fireworks入门

    选择新建“Fireworks文件”,弹出“新建文档”的对话框,如图5.1.2所示。在此,可根据实际需要设置画面的大小和颜色等等信息,各选项具体含义如下: 画布大小:设置文件画布的宽、高度,...

    易语言程序免安装版下载

    修改扩展界面支持库三,解决单击卷帘菜单后导致日期框不能弹出下拉窗口的BUG。 4. 修改XP风格支持库,解决GDI资源泄露,以及在使用通用组件库六时组合框标题出现重影的BUG。 5. 修改扩展界面支持库一,解决树形框...

Global site tag (gtag.js) - Google Analytics