学步园

1）php测试页面的代码

<table cellpadding="0" cellspacing="0" border="0" width="100%"><br /> <tr><br /> <td class="none" width="45%"><br /> <input type="text" name="txtProgram" class="textBox" /><br /> </td><br /> <td class="none"><br /> <a class="button" href="#" mce_href="#" id="btnProgram" name="btnProgram" onclick="displayDiv('Program',this)"><br /> <span>選択</span><br /> </a><br /> </td><br /> </tr><br /> <tr><br /> <td class="none" colspan="2" style="border-right:0px;border-bottom:0px" mce_style="border-right:0px;border-bottom:0px"><br /> <div id="Program" style="filter:alpha(opacity=75);position:absolute; z-index:100; display:none; background-color:#E2EEF3" mce_style="filter:alpha(opacity=75);position:absolute; z-index:100; display:none; background-color:#E2EEF3"><br /> 要测试的浮动层哦<br /> </div><br><br /> </div><br /> </td><br /> </tr><br /> </table>

浮动层定义的几个关键因素：z-index:100; display:none;

2）下面我需要点击按钮的时候显示出浮动层，而且浮动层要在按钮的右边。关于如何获取元素的坐标位置我会在下一篇博客中介绍，现在我们只有直接引用getElementPos得到元素坐标的函数即可

   /**<br /> * 显示浮动层<br /> * @param str 浮动层的id值<br /> * @param value 按钮的id值<br /> */<br /> function displayDiv(str,value)<br /> {<br /> floatArea=document.getElementById(str);<br /> if(floatArea.style.display=="none")<br /> {<br /> floatArea.style.border="#cde699 1px solid";<br /> var pos=getElementPos(value.id);<br /> x= pos.x;<br /> y=pos.y;<br /> floatArea.style.left=(document.documentElement.scrollLeft+x+65)+"px";<br /> floatArea.style.top=(document.documentElement.scrollTop+y+1)+"px";<br /> floatArea.style.width="300px";<br /> floatArea.style.display="";<br /> }<br /> else<br /> {<br /> closeFloat(str);<br /> }<br /> }

3）关闭浮动层的方式有很多，我们先试试直接点击按钮关闭浮动层。判断浮动层是否是none状态，如果不是则直接调用关闭的函数

/**
 * 关闭浮动层
 * @param str 浮动层的id值
 */
function closeFloat(str)
{
 floatArea=document.getElementById(str);
 floatArea.style.display="none";
}

4）如果我希望通过浮动层上的一个按钮来关闭。可以在浮动层的div之间加上一个关闭的按钮，然后触发closeFloat函数

  <div id="close" style="position:absolute;right:10px; top:auto; left:auto; bottom:0px;"><input name="img1" id="img1" type="image"　 width="20px" height="20px" src="images/close_float.gif" onclick="closeFloat('Program');" ></div>

5）如果你的页面上有很多动态生成的浮动层，你希望在另外一个浮动层出现之前把前一个浮动层给清空掉，由于你无法预估用户的操作，所以你也不清楚哪个浮动层先出现。

首先在php页面上定义一个隐藏域：<input type="hidden" name="hidDivs" id="hidDivs" value="{0:Program,1:Program1,2:Program2,3:Program3,4:Program4}">

其次在displayDiv函数开始处加入：

var hidDivs = document.getElementById("hidDivs");
 if (hidDivs != null) {
  eval("var divs = " + hidDivs.value);
  for (var i in divs) {
   if(divs[i].id!=document.getElementById(str).id)
   divs[i].style.display = "none";
  }
 }

找到除了当前浮动层之外的所有浮动层，并将其关闭。