寻求js高手实现弹出层,设置后输入框设值问题

大家可以打开这个网址看一下效果http://upload.taobao.com/mytaobao/postage/savePostage.htm?isFromMy=false&isFromPublish=false&auctionids=&auctionid=&selectedPostageid=null&fromType=fromListAll
我觉得很难实现

弹出层，就是一个div,设置绝对定位，设置一下坐标和z-index
<a href="#" onclick="displayDiv（）">选择</a>
<div id="chkDiv" style="position:absolute;z-index:99999;top:300px;width:400px;height:300px;left:200px;dispaly:none">
<span ><input type='checkbox' name='chk' value='a' /><span  style='cursor:pointer'>aaaa</span></span>
<span ><input type='checkbox' name='chk' value='b' /><span  style='cursor:pointer'>bbbbbb</span></span>
.....
<a href="#" onclick="getCheckValue（）">确定</a><a href="#" onclick="closeDiv()">取消</a>
</div>
var chkDiv;
var $ = function (id,obj) {
    return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
    return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};
function displayDiv(){
chkDiv= chkDiv || $("chkDiv");
chkDiv.style.display="block";
}
function closeDiv(){
chkDiv.style.display="none";
}
function getCheckValue(){
var chkList = $$('input',chkDiv));
        var checkedArray =[];
        for(var i=0;i<chkList.length;i++)
        {
            if(chkList[i].type=='checkbox' && chkList[i].checked)
            {
                checkedArray.push(getNextChild(chkList[i]).innerHTML);
            }
        }
        alert(checkedArray.json(','));
}//获取下一个节点
function getNextChild(obj) {
    var result = obj.nextSibling;
    while (result!=null &&!result.tagName) {
         result = result.nextSibling;
    }
    return result;
};

能不能写一个html demo出来,谢谢

照你说的这样报错<html>
<head>
<script>
var chkDiv;
var $ = function (id,obj) {
  return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
  return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};
function displayDiv(){
chkDiv= chkDiv || $("chkDiv");
chkDiv.style.display="block";
}
function closeDiv(){
chkDiv.style.display="none";
}
function getCheckValue(){
var chkList = $$('input',chkDiv));
  var checkedArray =[];
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked)
  {
  checkedArray.push(getNextChild(chkList[i]).innerHTML);
  }
  }
  alert(checkedArray.json(','));
}//获取下一个节点
function getNextChild(obj) {
  var result = obj.nextSibling;
  while (result!=null &&!result.tagName) {
  result = result.nextSibling;
  }
  return result;
};
</script>
</head>
<body>
<a href="#" onclick="displayDiv()">选择</a>
<div id="chkDiv" style="position:absolute;z-index:99999;top:300px;width:400px;height:300px;left:200px;dispaly:none">
<span ><input type='checkbox' name='chk' value='a' /><span style='cursor:pointer'>aaaa</span></span>
<span ><input type='checkbox' name='chk' value='b' /><span style='cursor:pointer'>bbbbbb</span></span>
<a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
</div>
</body></html>

<html>
<head>
<script>
var chkDiv;
var $ = function (id,obj) {
  return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
  return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};
function displayDiv(){
chkDiv= chkDiv || $("chkDiv");
chkDiv.style.display="block";
}
function closeDiv(){
chkDiv.style.display="none";
}
function getCheckValue()
{
var chkList = $$('input',chkDiv);
  var checkedArray =[];
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked)
  {
  checkedArray.push(getNextChild(chkList[i]).innerHTML);
  }
  }
  alert(checkedArray.join(','));
}//获取下一个节点
function getNextChild(obj) {
  var result = obj.nextSibling;
  while (result!=null &&!result.tagName) {
  result = result.nextSibling;
  }
  return result;
};
</script>
</head>
<body>
<a href="#" onclick="displayDiv()">选择</a>
<div id="chkDiv" style="position:absolute;z-index:99999;top:300px;width:400px;height:300px;left:200px;display:none">
<span ><input type='checkbox' name='chk' value='a' /><span style='cursor:pointer'>aaaa</span></span>
<span ><input type='checkbox' name='chk' value='b' /><span style='cursor:pointer'>bbbbbb</span></span>
<a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
</div>
</body></html>现在可以了。我直接在这儿写的的，写错了一个单词，多了一个（！看来还是要用 IDE ，呵呵

感谢hch126163的帮助,如何实现假设现在输入框里有值 a,b,如何在点输入框的时候,把值传到层里使,a和b勾选出来,当点下面的"选择时间" 是加一个输入框,并把值传到新加的输入框呢,同样点新的输入框也可以把值传到层里面并勾选.
下面是源代码.请高手赐教
<html>
<head>
<script>
var chkDiv;
var $ = function (id,obj) {
  return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
  return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};
function displayDiv(){
chkDiv= chkDiv || $("chkDiv"); var chkList = $$('input',chkDiv);
  var checkedArray =[];
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked)
  {
     chkList[i].checked=false;
  }
  }
chkDiv.style.display="block";
}
function closeDiv(){
chkDiv.style.display="none";
}
function getCheckValue()
{
var chkList = $$('input',chkDiv);
  var checkedArray =[];
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked)
  {
  checkedArray.push(getNextChild(chkList[i]).innerHTML);
  }
  }
timese.value=checkedArray.join(',');
setTimeout(function(){
    closeDiv();
},1000);}//获取下一个节点
function getNextChild(obj) {
  var result = obj.nextSibling;
  while (result!=null &&!result.tagName) {
  result = result.nextSibling;
  }
  return result;
};
</script>
</head>
<body>
<input type="text" id="timese" onclick="displayDiv()"><br>
<a href="#" onclick="displayDiv()">选择时间</a>
<div id="chkDiv" style="position:absolute;z-index:99999;top:300px;width:400px;height:300px;left:200px;display:none">
<span ><input type='checkbox' name='chk' value='a' /><span style='cursor:pointer'>aaaa</span></span>
<span ><input type='checkbox' name='chk' value='b' /><span style='cursor:pointer'>bbbbbb</span></span>
<span ><input type='checkbox' name='chk' value='c' /><span style='cursor:pointer'>ccccc</span></span>
<a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
</div>
</body></html>

<html>
<head>    <script>
     var chkDiv;
     var timese;
     var chkList;
     var $ = function (id,obj) { return 'string' == typeof(id) ? (obj||document).getElementById(id) : id; };
      var $$ = function (name,obj) { return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name; };
      Array.prototype.contain=function(value){
        if(this!=null && this.length>0){
            for(var i=0;i<this.length;i++)
            {
                if(this[i]==value){ return true;}
            }
        }
        return false;
    };
      function displayDiv(v)
      {
      debugger;


            if(v && v !=""){
                try{
                    var checkedArray = v.split(',');
                    chkList = chkList||$$('input',chkDiv);
                     for(var i=0;i<chkList.length;i++)
                       {
                           if(chkList[i].type=='checkbox'&& checkedArray.contain(getNextChild(chkList[i]).innerHTML))
                            {
                                 chkList[i].checked=true;
                            }
                         }
                }catch(ex){}
            }
            chkDiv =chkDiv|| $('chkDiv');
           chkDiv.style.display="block";

        }

        function closeDiv()
        {
           for(var i=0;i<chkList.length;i++)
          {
              if(chkList[i].type=='checkbox' && chkList[i].checked) {
                 chkList[i].checked=false;
               }
          }
            chkDiv.style.display="none";

        }

       function getCheckValue() {
        chkList = chkList||$$('input',chkDiv);
       var checkedArray =[];
        for(var i=0;i<chkList.length;i++)
       {
           if(chkList[i].type=='checkbox' && chkList[i].checked) { checkedArray.push(getNextChild(chkList[i]).innerHTML); } }
           timese =timese||$("timese");
           timese.value=checkedArray.join(','); setTimeout(function(){ closeDiv(); },1000);
         }
        //获取下一个节点
        function getNextChild(obj) { var result = obj.nextSibling; while (result!=null &&!result.tagName) { result = result.nextSibling; } return result; };

        </script></head>
<body>
    <input type="text" id="timese" onclick="displayDiv(this.value)"><br>
    <div id="chkDiv" style="position: absolute; z-index: 99999; top: 300px; width: 400px;
        height: 300px; left: 200px; display: none">
        <span>
            <input type='checkbox' name='chk' value='a' /><span style='cursor: pointer'>aaaa</span></span>
        <span>
            <input type='checkbox' name='chk' value='b' /><span style='cursor: pointer'>bbbbbb</span></span>
        <span>
            <input type='checkbox' name='chk' value='c' /><span style='cursor: pointer'>ccccc</span></span>
        <a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
    </div>
</body>
</html>

给 span 加上点击事件，选中checkbox 用户体验更好
<html>
<head>
<style type="text/css">
.chkSpan{cursor: pointer}
</style>
    <script>
     var chkDiv;
     var timese;
     var chkList;
     var $ = function (id,obj) { return 'string' == typeof(id) ? (obj||document).getElementById(id) : id; };
      var $$ = function (name,obj) { return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name; };
      Array.prototype.contain=function(value){
        if(this!=null && this.length>0){
            for(var i=0;i<this.length;i++)
            {
                if(this[i]==value){ return true;}
            }
        }
        return false;
    };
      function displayDiv(v)
      {
            if(v && v !=""){
                try{
                    var checkedArray = v.split(',');
                    chkList = chkList||$$('input',chkDiv);
                     for(var i=0;i<chkList.length;i++)
                       {
                           if(chkList[i].type=='checkbox')
                            {
                                 chkList[i].checked=checkedArray.contain(getNextChild(chkList[i]).innerHTML);
                            }
                         }
                }catch(ex){}
            }
           chkDiv.style.display="block";

        }

        function closeDiv()
        {
            chkDiv.style.display="none";
        }

       function getCheckValue() {
        chkList = chkList||$$('input',chkDiv);
       var checkedArray =[];
        for(var i=0;i<chkList.length;i++)
       {
           if(chkList[i].type=='checkbox' && chkList[i].checked) { checkedArray.push(getNextChild(chkList[i]).innerHTML); } }
           timese =timese||$("timese");
           timese.value=checkedArray.join(','); setTimeout(function(){ closeDiv(); },1000);
         }
       //获取上一个节点
        function getPreviousChild(obj) {
            var result = obj.previousSibling;
            while(result!=null &&!result.tagName) {
                 result = result.previousSibling;
            }
            return result;
        };
        //获取下一个节点
        function getNextChild(obj) {
            var result = obj.nextSibling;
            while (result!=null &&!result.tagName) {
                 result = result.nextSibling;
            }
            return result;
        };
        window.onload=function(){
         chkDiv =chkDiv|| $('chkDiv');
         chkSpanList = $$("span",chkDiv);
         for(var i=0;i<chkSpanList.length;i++){
             if(chkSpanList[i].className=="chkSpan"){
                 (function(i){
                     chkSpanList[i].onclick=function(){
                        var chk = getPreviousChild(this);
                       if(chk!=null) chk.checked=!chk.checked;
                     };

                 })(i);
             }
         }
        };
        </script></head>
<body>
    <input type="text" id="timese" onclick="displayDiv(this.value)"><br>
    <div id="chkDiv" style="position: absolute; z-index: 99999; top: 300px; width: 400px;
        height: 300px; left: 200px; display: none">
        <span>
            <input type='checkbox' name='chk' value='a' /><span class='chkSpan'>aaaa</span></span>
        <span>
            <input type='checkbox' name='chk' value='b' /><span class='chkSpan'>bbbbbb</span></span>
        <span>
            <input type='checkbox' name='chk' value='c' /><span class='chkSpan'>ccccc</span></span>
        <a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
    </div>
</body>
</html>

以下是代码<html>
<head>  <script>
  var chkDiv;
  var timese;
  var chkList;
   var rc = 1;
  var $ = function (id,obj) { return 'string' == typeof(id) ? (obj||document).getElementById(id) : id; };
  var $$ = function (name,obj) { return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name; };
  Array.prototype.contain=function(value){
  if(this!=null && this.length>0){
  for(var i=0;i<this.length;i++)
  {
  if(this[i]==value){ return true;}
  }
  }
  return false;
  };
  function displayDiv(v)
  {
  debugger;


  if(v && v !=""){
  try{
  var checkedArray = v.split(',');
  chkList = chkList||$$('input',chkDiv);
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox'&& checkedArray.contain(getNextChild(chkList[i]).innerHTML))
  {
  chkList[i].checked=true;
  }
  }
  }catch(ex){}
  }
  chkDiv =chkDiv|| $('chkDiv');
  chkDiv.style.display="block";

  }
      function adddiv()
    {
        rc++;

        var tbl = document.getElementById("tbl");

        var r = document.createElement("tr");
        var cell = document.createElement("td");

        cell.innerHTML = "<input type='text' id='txt" + rc + "' />";
        r.appendChild(cell);

        tbl.appendChild(r);
        alert(tbl.innerHTML);
    }
  function closeDiv()
  {
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked) {
  chkList[i].checked=false;
  }
  }
  chkDiv.style.display="none";

  }

  function getCheckValue() {
  chkList = chkList||$$('input',chkDiv);
  var checkedArray =[];
  for(var i=0;i<chkList.length;i++)
  {
  if(chkList[i].type=='checkbox' && chkList[i].checked) { checkedArray.push(getNextChild(chkList[i]).innerHTML); } }
  timese =timese||$("timese");
  timese.value=checkedArray.join(',');
    closeDiv();
  }
  //获取下一个节点
  function getNextChild(obj) { var result = obj.nextSibling; while (result!=null &&!result.tagName) { result = result.nextSibling; } return result; };

  </script></head>
<body>

  <table border="0">
<tbody id="tbl">
    <tr>
    <td>
       输入框<input type="text" id="timese" onclick="displayDiv(this.value)">
    </td>
    </tr>
    </tbody>
</table>


  <a href="#" onclick="displayDiv()">添加时间</a>
  <div id="chkDiv" style="position: absolute; z-index: 500; top: 100px; width: 400px;height: 300px; left: 35px; display: none">
  <span>
  <input type='checkbox' name='chk' value='a' /><span style='cursor: pointer'>aaaa</span></span>
  <span>
  <input type='checkbox' name='chk' value='b' /><span style='cursor: pointer'>bbbbbb</span></span>
  <span>
  <input type='checkbox' name='chk' value='c' /><span style='cursor: pointer'>ccccc</span></span>
   <br>
  <a href="#" onclick="getCheckValue()">确定</a>   <a href="#" onclick="closeDiv()">取消</a>
  </div>
</body>
</html>

因为点确定的触发 getCheckValue() 时候我不知道是通过添加进来的还是通过输入框进来的

调试易

寻求js高手实现弹出层,设置后输入框设值问题

解决方案 »

寻求js高手实现 弹出层,设置后输入框设值问题

解决方案 »

寻求js高手实现弹出层,设置后输入框设值问题