要移动层（把层移动到某个位置）就必须先将层设置绝对定位 style='position:absolute' .
<span style=display:inline-block;'>将整个div内容设置成一个块,同一行
<div style='width:400px;float:left;display:block;'>将整个div内容设置成一个块，块的大小为400px，左对齐，这样当页面一行显示不了多个块的内容时，那么那行最后一个块会自动折行，看例子就明白了
想要层遮住下拉框就要加上iframe和样式属性z-index(小的在下面)才可以遮住下拉框
<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"'> X </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"'> X </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"'> X </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"'> X </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>
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
