我需要做这样的一个效果: 
当文本框获得焦点的时候,在文本框的下方显示一个浮动层,浮动层里需要放一个和浮动层高度宽度相同的iframe。
 
当用户在显示的浮动层上点击的时候,浮动层不能隐藏。
当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。 现在的问题是:如何识别用户点击了网页空白处?或者说,如何识别用户点击的不是文本框和浮动层?注意层里面含有iframe,如果不放iframe就要简单得多,我自己也能解决,关键是层中放了iframe在firefox就运行不成功。 
注:单一判断文本框丢失焦点,然后隐藏浮动层,肯定是不行的,那样的话,在浮动层上点击鼠标也会隐藏浮动层。希望各位高手帮我一把,最好能给出在IE和firefox都能运行的代码,放分100,不够再加。
效果图:

解决方案 »

  1.   

    代码未经测试var textinput = document.getElementById("文本框的ID");
    var odiv = document.getElementById("div的id");textinput.onclick = textinput.onfocus = function(e){odiv.style.display="block";e=window.event||e;e.cancelBubble=true;}
    document.onclick = function(){odiv.style.display="none";}
      

  2.   

    安全起见再加个odiv的onclick事件odiv.onclick = textinput.onclick = textinput.onfocus = function(e){odiv.style.display="block";e=window.event||e;e.cancelBubble=true;}
    document.onclick = function(){odiv.style.display="none";}
      

  3.   

    测试完毕:有点小问题 e=window.event||e;可能出错 反过来写就好 e=e||window.event;<script language="javascript">
    var odiv = document.getElementById("odiv");
    var oinput = document.getElementById("oinput");odiv.onclick = oinput.onclick = oinput.onfocus = function(e){odiv.style.display="block";e=e||window.event;e.cancelBubble=true;}
    document.onclick = function(){odiv.style.display="none";}
    </script>
      

  4.   

    <body>
    <script>
    window.onload=function(){
     if (document.all){
     window.document.onclick= new Function("return onClick(event);");
      }else{
     window.document.body.setAttribute("onclick","return onClick(event);")
     }}
    function onClick(ev){
    ev         = ev || window.event;
    var target = ev.target || ev.srcElement;

    if(target&&target.id&&target.id=="in")
    {
    document.getElementById("show").style.display="block";}
    else
    document.getElementById("show").style.display="none";
    if(target.tagName!="DIV")return false
    }
    </script>
    <input value="" id="in" type="text">
    <div style="width:100px; height:100px;" id="show">
    <iframe src="" scrolling="no" height="100px" width="100px"></iframe>
    </div></body>