弹出DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function func(){
var arr = document.getElementsByName("user");
var str = "";
for(var n=0;n<arr.length;n++){
if(arr[n].checked){
if(str.length>0){
str += ",";
}
str += arr[n].value;
}
}
document.getElementById("i1").value = str;
document.getElementById("div1").style.display = "none";
}
function show(){
document.getElementById("div1").style.display = "";
}
</script>
<title>首页 </title></head>
<body>
<input type="text" id="i1" name="userName" onclick="show()" />
<div id="div1" style="display:none;">
  <input name="user" type="checkbox" value="aa" />aa
  <input name="user" type="checkbox" value="bb" />bb
  <input name="user" type="checkbox" value="cc" />cc
  <input name="user" type="checkbox" value="dd" />dd
  <input name="user" type="checkbox" value="ee" />ee
  <input type="button" name="button" value="确定" onClick="func()" />
  <input type="button" name="reset" value="取消" />
</div> 
</body>
</html> 

解决方案 »

  1.   

    text里的 onFocus事件 一个函数A把DIV里的东西写进 函数 A里 。确定那边再 调用一个函数B。。 仔细思考一下 很容易写的
      

  2.   


    <input type="text" name="userName" id="userName" onBlur="funShow()"/> 
    <div id="divUserName" style="display:none">--隐藏
    var  userName =  document.getElementById("divUserName");
    userName.style.display   =   "block";--显示有事，大概这个意思吧
      

  3.   


    <style>
    #div1
    {
        width:400px;
        border:solid 1px #ccc;
        display:none; 
        position:absolute;
        z-index:100;
    }
    </style>
    <input type="text" id="userName" onclick="popChose(1)"  /> 
    <div id="div1" style="width:400px;border:solid 1px #ccc;display:none"> 
      <input name="user" type="checkbox" value="aa" /> 
      <input name="user" type="checkbox" value="bb" /> 
      <input name="user" type="checkbox" value="cc" /> 
      <input name="user" type="checkbox" value="dd" /> 
      <input name="user" type="checkbox" value="ee" /> 
      <input type="button" name="button" value="confirm" onclick="setVal()" /> 
      <input type="button" name="reset" value="cancel" onclick="popChose(0)" /> 
    </div> 
    <script language="Javascript">
    function setVal()
    {
        var input = document.getElementById("userName");
        var div = document.getElementById("div1");
        var chks = div.getElementsByTagName("input");
        var arr = [];
        for(var i=0;i<chks.length;i++)
        {
            if(chks[i].type && chks[i].type=="checkbox")
            {
                if(chks[i].checked)
                    arr.push(chks[i].value);
            }
        }
        input.value=arr.join(",");
        popChose(0);
    }
    function popChose(flag)
    {
        var div = document.getElementById("div1");
        var input = document.getElementById("userName");
        if(flag==0)
        {
            div.style.display="none";
            return;
        }
        var x = pageX(input);
        var y = pageX(input);
        var h = input.offsetHeight;    div.style.left = x;
        div.style.top = y+h+3;
        div.style.display="block";
    } 
    function pageX(elem)
    {   
        return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;   
    }   
     
    function pageY(elem)
    {   
        return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;   
      
    }   </script>
      

  4.   

    这个不错！不过用onFocus更合适！用TAB切换！不会触发onclick事件！
      

  5.   

       其實并不難，主要用到document.style.display="" 顯示div
                    document.style.display="none" 隱藏div