`

有关层定位、显示、隐藏的例子

IE中国移动CSSXHTML 
阅读更多
要移动层（把层移动到某个位置）就必须先将层设置绝对定位 style='position:absolute' .
<span style=display:inline-block;'>将整个div内容设置成一个块,同一行
<div style='width:400px;float:left;display:block;'>将整个div内容设置成一个块，块的大小为400px，左对齐，这样当页面一行显示不了多个块的内容时，那么那行最后一个块会自动折行，看例子就明白了

想要层遮住下拉框就要加上iframe和样式属性z-index(小的在下面)才可以遮住下拉框 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<HEAD>
<title>有关层定位、显示、隐藏的例子，加上iframe和样式属性z-index(小的在下面)可以遮住下拉框</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"/>
<META HTTP-EQUIV="Expires" CONTENT="0"/>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=gbk"/>

<style>
.divBlock {
	width:400px;
	float:left;
	display:block;
}

</style>

<script type="text/javascript">

	var idOfOnClickElement="";//用于判断按钮的名称(这里是点击的地方)
	var idOfDivElement="";//当前DIV元素的id
	var idOfDivElementBefore="";//上一次点击的DIV元素的的id

	//信息层的隐藏和显示
	function divDisable(flag,evt){
		var divElement=document.getElementById(flag)
		var elem = evt.srcElement ? evt.srcElement : evt.target;
		idOfOnClickElement=elem.getAttribute('id');

		idOfDivElementBefore=idOfDivElement;

		idOfDivElement=flag;
		var posDiv=findPos(elem); 
		posDiv.push(elem.offsetHeight); 
		posDiv.push(elem.offsetWidth);
		divElement.style.top=(posDiv[1]+posDiv[2])+'px';
		divElement.style.left=posDiv[0]-75+'px';
		
		var divLeft = parseInt(divElement.style.left);
		transactDivPosition(divElement,divLeft);

		if(divElement.style.display=='block'){
			divElement.style.display='none';
		}else{
			divElement.style.display='block';
			if(idOfDivElementBefore != idOfDivElement && idOfDivElementBefore!=""){
				document.getElementById(idOfDivElementBefore).style.display='none';
			}
		}

		getHiddenIframe(divElement);
	}

	//用于判断层的位置,
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		} 
		return [curleft,curtop];
	}


	//关闭按钮-隐藏层
	function closeByDivId(divID){
		document.getElementById(divID).style.display='none';
		document.getElementById('hiddenIframe').style.display='none';
	}
//处理层的位置
	function transactDivPosition(divElement,divLeft){
		
		var screenWidth = document.body.scrollWidth;
		var resuleLeft = screenWidth-divLeft;
		//alert(("divLeft:"+divLeft));
		
		//处理位于最左边的层
		if(divLeft<9){
			divElement.style.left=9+'px';
		}
		
		//处理位于最右边的层
		if(resuleLeft<220){
			if(window.ActiveXObject){//IE
				if(screenWidth-divLeft<140){
					divElement.style.top=parseInt(divElement.style.top)-18+'px';
					if(resuleLeft>130){
						divElement.style.left=divLeft-78+'px';
					}else if(resuleLeft>115){
						divElement.style.left=divLeft-85+'px';
					}else if(resuleLeft>110){
						divElement.style.left=divLeft-95+'px';
					}else if(resuleLeft>102){
						divElement.style.left=divLeft-105+'px';
					}else{
						divElement.style.left=divLeft-110+'px';
					}
					//alert((screenWidth-divLeft));
				}else{
					if(screenWidth-divLeft>=160){
						divElement.style.left=divLeft-10+'px';;
					}else{
						divElement.style.left=divLeft-60+'px';;
					}
					//alert((screenWidth-divLeft));
				}
			}else{//非IE
				if(screenWidth-divLeft<140){
					if(resuleLeft<130){
						divElement.style.top=parseInt(divElement.style.top)-20+'px';
					}
					if(resuleLeft>130){
						divElement.style.left=divLeft-75+'px';
					}else if(resuleLeft>115){
						divElement.style.left=divLeft-85+'px';
					}else if(resuleLeft>110){
						divElement.style.left=divLeft-95+'px';
					}else if(resuleLeft>102){
						divElement.style.left=divLeft-105+'px';
					}else{
						divElement.style.left=divLeft-112+'px';
					}
					//alert((screenWidth-divLeft));
				}else{
					if(screenWidth-divLeft>190){
						divElement.style.left=divLeft-10+'px';;
					}else if(resuleLeft>175){
						divElement.style.left=divLeft-25+'px';
					}else if(resuleLeft>160){
						divElement.style.left=divLeft-35+'px';
					}else{
						divElement.style.left=divLeft-60+'px';;
					}
					
				}
			}
		}
	}

	function getHiddenIframe(divElement){
		var hiddenIframe=document.getElementById('hiddenIframe');////这个iframe主要是为了遮住下拉框的

		//如果样式在css定义像下面这样是不能拿取到值的，所以就要换一种方式取值,如：hiddenIframe.style.height = divElement.offsetHeight;
		hiddenIframe.style.height= divElement.style.height;
		hiddenIframe.style.width= divElement.style.width;
		//拿取css给divElement定义的值,用下面两个
		//hiddenIframe.style.height = divElement.offsetHeight;
		//hiddenIframe.style.width= divElement.offsetWidth;

		hiddenIframe.style.left= divElement.style.left;
		hiddenIframe.style.top= divElement.style.top;

		if(divElement.style.display=='block'){
			hiddenIframe.style.display='block';
		}else{
			hiddenIframe.style.display='none';
		}
	}
	
	
	//自定义的点击事件
	var fnBlurDIV=function(evt){ 
		evt = evt ? evt : (window.event ? window.event : null);
		var elem = evt.srcElement ? evt.srcElement : evt.target;
		if(!(!document.getElementById(idOfOnClickElement))){
			if(elem != document.getElementById(idOfOnClickElement) && elem != document.getElementById(idOfDivElement)){
				if(document.getElementById(idOfDivElement).style.display != 'none'){ 		
					document.getElementById(idOfDivElement).style.display = 'none';
					document.getElementById('hiddenIframe').style.display='none';
				}
			}
		}
	 }
	//给任何元素添加点击事件
	function initPatternClickEvent(){
		if (window.addEventListener) {//非IE,// 添加监听
			document.addEventListener('click',fnBlurDIV,false);
		} else if (window.attachEvent){//IE
			document.attachEvent('onclick', fnBlurDIV);
		}
	}
	
	
</script>



	</HEAD>
	
	<body leftmargin="2px;" class="body">
		
			 	  



<form	name="thisForm"	method="post">

	
 	<table border="1" cellpadding="3" cellspacing="1" width="100%" >
<tr bgColor="#ffffff"><td>
<div class="divBlock" name="orderById20030526$1" id="orderById20030526$1" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>涂平测试,,<a id="aId1" onclick='divDisable("divID1",event)' style='cursor:pointer'>更多信息</a></div>

<div class="divBlock" name="orderById20030526$2" id="orderById20030526$2" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>喜得龙（中国）有限公司-重庆分,2008-09-16 10:26:35.43,<a id="aId2" onclick='divDisable("divID2",event)' style='cursor:pointer'>更多信息</a></div>
<div class="divBlock" name="orderById20030526$3" id="orderById20030526$3" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>广东好百年装饰设计公司,2008-10-24 17:02:53.23,<a id="aId3" onclick='divDisable("divID3",event)' style='cursor:pointer'>更多信息</a></div>
<div class="divBlock" name="orderById20030526$4" id="orderById20030526$4" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>佛山市南海安地五金电器厂,2007-04-11 10:02:00.0,<a id="aId4" onclick='divDisable("divID4",event)' style='cursor:pointer'>更多信息</a></div>
</td></tr>
<tr><td><select name='test'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></td></tr>
</table>

<div id='divID1' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table  width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID1")'  onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>11111111111</td></tr></table></div>

<div id='divID2' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table  width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID2")'  onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>22222222222222</td></tr></table></div>

<div id='divID3' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID3")'  onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>3333333333</td></tr></table></div>

<div id='divID4' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table  width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID4")'  onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>444444444444</td></tr></table></div>


<iframe id='hiddenIframe' style='position:absolute;display:none;z-index:3000;'></iframe>

	</body>
</html>

<script type="text/javascript">
	initPatternClickEvent();
</script>
分享到：
| 用java-io查找包含关键字的文件或用某些字 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AS400 RLU编程wrod版

    3.5 定位设计报表显示 3.6 设计报表显示中的取消行 3.7 显示设计报表显示中的取消行 HDEE 隐藏命令 3.8 不截断数据的左右移行 3.9 截断数据的左右移行 3.10 生成水平窗口 3.11 显示格式行 3.12 对记录做提示 3.13 ...

    visio教程PDF

    16．5．3 使用层选进行复制 16．5．4 使用Chart Shape Wlzard创建堆叠式和可扩展图形 16．6 小结第17章 连接图形 17．1 Visio中的图形和连接器 17．2 连接点、连接器工具和静态粘贴 17．2．1 使用静态粘贴的...

    Visio 2000 技术大全

    16．5．3 使用层选进行复制 16．5．4 使用Chart Shape Wlzard创建堆叠式和可扩展图形 16．6 小结第17章 连接图形 17．1 Visio中的图形和连接器 17．2 连接点、连接器工具和静态粘贴 17．2．1 使用静态...

    免费开源思维导图 Freeplane 1.9.1 中文多语免费版.zip

    Freeplane 思维导图软件中文版是由经典思维导图软件 FreeMind 的主创人员... 演示不仅展开节点，还显示隐藏的细节，使当前节点居中。 简而言之，它支持遍历思维导图，从用户那里获取丰富的点击。 您可以在这里下载并

    Tcl_TK编程权威指南pdf

    Tcl_TK编程权威指南pdf 内容简介回到顶部↑Tcl/Tk是第一种能通过Windows、Macintosh和Solaris等主要平台处理企业...脚本语言层可以存取与shell类似的功能以运行其他的程序，可以存取文件系统，还可以直接通过自己定义的...

    华报智能报表工具

    华报智能报表工具（ReportAll）是开发人员最理想的报表工具，具有全新的设计思想，对中国式报表和很多复杂报表有很强的针对性，他将“对象摆放”类和“电子表格”类报表开发工具完美融合，... 支持菜单的隐藏和显示。

    asp.net知识库

    页面一postback，它就显示页面的最顶端，怎样让它定位在某一位置？ 如何保证页面刷新后的滚动条位置 清除网页历史记录，屏蔽后退按钮! 如何传值在2个页面之间 ：要求不刷新父页面，并且不能用Querystring传值 Asp...

    css入门笔记

    2.hidden 隐藏的，溢出的内容全部隐藏，不可见溢出 3.scroll 显示滚动条，溢出时可用 4.auto 自动，溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性：border： 取值： 2、...

    华为编程开发规范与案例

    结果打印出来的数据正常,不可能为零,仔细查看相关代码,问题只可能在指针移位上有问题,果然在函数中发现一处比较隐蔽的错误。 /* 功能:一个BM模块内所有小区CDB侧广播消息忙闲情况 */ /***************************...

    网管教程 从入门到精通软件篇.txt

    可用NSREX打开 Velvet Studio例子文件 ASF：Microsoft高级流媒体格式文件 ASM：汇编语言源文件，Pro/E装配文件 ASP：动态网页文件；ProComm Plus安装与连接脚本文件；Astound介绍文件 AST：Astound多媒体文件；...

    代码语法错误分析工具pclint8.0

    使用PC-Lint在代码走读和单元测试之前进行检查，可以提前发现程序隐藏错误，提高代码质量，节省测试时间。并提供编码规则检查，规范软件人员的编码行为。 由于PC-LINT对于一般程序员来说可能比较陌生，有好多人安装...

    新版Android开发教程.rar

    己的格式，回避掉需要付给 SUN 有关 JAVA 的授权费用。 对手机制造者的影响 � Android 是款开源的移动计算软件平台，组建了 google 主导的拥有众多产业界巨头的产业联盟，有利于 高效开发、降低成本。 � 由于是源...

    疯狂JAVA讲义

    学生提问：图11.15和图11.16显示的所有按钮都紧挨在一起，如果希望像FlowLayout、GridLayout等布局管理器指定组件的间距该怎么办？ 397 11.4 AWT 常用组件 398 11.4.1 基本组件 398 11.4.2 对话框 400 11.5 事件...

    二十三种设计模式【PDF版】

    你必须找到相关的对象，以适当的粒度将它们归 类，再定义类的接口和继承层次，建立对象之间的基本关系。你的设计应该对手头的问题有针对性，同时对将来的问题和需求 也要有足够的通用性。 你也希望避免重复设计或尽...

Magicbox
Global site tag (gtag.js) - Google Analytics