`

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

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查找包含关键字的文件或用某些字 ...
评论
发表评论

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

相关推荐

    DIV弹出层+定位

    在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...

    界面遮罩层例子

    例如，当用户在等待一个异步操作（如数据加载）时，我们可以自动显示遮罩层，待操作完成后再自动隐藏。 总结来说，这个例子展示了如何使用HTML、CSS和JavaScript实现一个基础的界面遮罩层，用于增强用户界面的交互...

    jquery仿蘑菇街鼠标经过显示隐藏说明层

    本文将详细讲解如何使用jQuery实现“仿蘑菇街鼠标经过显示隐藏说明层”的功能，这是一种常见的交互设计，能提升用户体验，让用户更直观地了解商品信息。 首先，我们来理解这个功能的基本原理：当用户将鼠标悬停在...

    网页上菜单的隐藏、显示与滚动

    本文将深入探讨如何实现菜单的隐藏、显示以及与滚动条的交互，特别是当鼠标移到某个菜单上时显示子菜单的动态效果。 首先，菜单的隐藏与显示通常涉及到CSS（层叠样式表）中的`display`属性。`display`属性可以设置...

    jquery弹出层的例子

    4. **动画效果**：jQuery提供了丰富的动画效果，如`.fadeIn()`和`.slideToggle()`，可以用来优雅地显示和隐藏弹出层，增加用户体验。 5. **内容填充**：在登录弹出层中，需要包含用户名和密码输入字段，以及登录...

    用于登录的jQuery 弹出层例子代码

    最后，我们使用jQuery来控制弹出层的显示、隐藏以及表单的提交事件。这里有两个主要的函数：`showModal()` 和 `hideModal()`。当用户点击登录按钮或者关闭按钮时，调用这两个函数。 ```javascript $(document)....

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    在这个例子中，我们有一个ID为"tip"的DIV元素，它是需要渐变显示和隐藏的目标层。这个层在默认状态下是不可见的，通过CSS设置`display:none`。同时，它具有绝对定位（`position:absolute`），以便我们可以精确控制其...

    jQuery点击图片弹出层显示文字.zip

    4. 定位弹出层：使用`.offset()`或`.position()`获取图片的位置信息，然后根据这些信息调整弹出层的位置，确保它在图片下方或旁边正确显示。 5. 关闭弹出层：在弹出层内添加一个关闭按钮（比如“X”图标），并为其...

    js实现点击弹出层并定位赋值

    接下来，我们需要用JavaScript（例如使用jQuery库，因为它的API简洁易用）来处理点击事件和弹出层的显示、定位及赋值： ```javascript $(document).ready(function() { $('#myTable td').on('click', function(e) ...

    两个js弹出div层并获取当前页面值的html例子

    在弹出层的应用中，我们将div作为弹出窗口的基础容器，通过JavaScript控制其显示和隐藏。 接着，JavaScript在其中起着关键作用。JS可以改变div的CSS属性（如display），从而实现弹出和关闭的效果。例如，将display...

    Jquery 点击按钮显示和隐藏层的代码

    6. **隐藏与显示**：使用`$("#divObj").show()`和`$("#divObj").hide()`来控制层的显示与隐藏。`$("#tab tr td").click(function (event) {})`绑定了表格单元格的点击事件，将选中的td内容赋值给id为`aaa`的输入框。...

    非常不错的弹出层特效

    在这个例子中，JavaScript会监听用户的点击或其他事件，然后触发弹出层的显示和隐藏。此外，由于提到可以传参数，这意味着`script.js`可能包含了一些函数，允许开发者传递参数来控制弹出层的行为，比如设置弹出层的...

    asp.net弹出层带遮罩层

    "divLogin"将包含登录表单和其他相关元素，它的样式应设置为绝对定位，以便在页面中精确地显示。"doing"则用于创建遮罩层，其颜色通常是半透明黑色，同样设置为绝对定位，覆盖整个页面。 以下是一个简单的HTML示例...

    query弹出层！父窗体至于不可用状态！很好的例子

    4. **弹出层实现**：常见的弹出层实现方法包括创建一个隐藏的HTML元素（如`&lt;div&gt;`），当触发特定事件时显示该元素。例如，一个按钮点击事件可能触发弹出层显示，并设置其样式使其浮于父窗体之上。 5. **阻止背景...

    JS变灰页面显示遮罩层登录窗口，使页面无法操作

    综上所述，实现"JS变灰页面显示遮罩层登录窗口，使页面无法操作"这一功能，主要涉及JavaScript的DOM操作、CSS样式控制、Ajax无刷新交互等多个技术点，通过这些技术，我们可以为用户提供更加友好的交互体验。

    jquery-Hover遮罩层

    在这个例子中，`fadeIn`和`fadeOut`是jQuery提供的动画效果，它们分别用于平滑地显示和隐藏元素。通过调整CSS样式和jQuery的动画效果，可以创建多种类型的遮罩层显示效果，如渐变、滑动等。 在实际应用中，"jquery-...

    弹出遮罩层，纯JS效果，可自定义背景

    通过修改CSS和JavaScript代码，我们可以自定义遮罩层的外观和行为，包括背景颜色、定位方式、显示和隐藏的触发事件等。这个简单的实现为开发者提供了一个基础模板，可以根据项目需求进行扩展和优化。

    js浮动弹出层示例。

    同时，为了实现“浮动”的效果，可能还需要设置CSS中的position属性为absolute或fixed，以便让弹出层相对于浏览器窗口或其父元素定位。 在CSS中，我们可以定义弹出层的大小、颜色、边框等样式，以使其符合设计需求...

    html中一个div层在另外一个div或者img上显示

    这个示例可能包括更复杂的布局和交互，例如动态显示/隐藏覆盖层，或者在鼠标悬停时改变覆盖层的样式等。在实际应用中，根据项目需求，你可能需要调整这些代码以适应特定的场景。 总之，通过理解并巧妙运用CSS的定位...

    JS触发滚动条弹出层

    在这个例子中，我们首先获取了ID为`popup`的弹出层元素，并定义了一个变量`triggerDistance`，表示滚动多少像素后弹出层应该出现。然后，我们添加了一个`scroll`事件监听器，当用户滚动页面时，会检查当前的滚动距离...

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