点击按钮弹出回复框的问题，新手努力学习中。谢谢！

下面的链接中的id值为对应问题的id，层answer用来装载回复界面<div id="qList">
问题1？<a href="javascript:void(0);" id="1">回复</a>
问题2？<a href="javascript:void(0);" id="2">回复</a>
问题3？<a href="javascript:void(0);" id="3">回复</a>
问题4？<a href="javascript:void(0);" id="4">回复</a>
</div>
<div id="answer" style=" position:absolute;display:none;border:1px solid #bfbfbf;width:200px;height:50px; background:#fff"><script type="text/javascript">
function getMousePos(){var ev=asfman.Event();return{x:ev.cltX+document.documentElement.scrollLeft-2,y:ev.cltY+document.documentElement.scrollTop-2}}
var asfman={};
var isIE=navigator.appName=="Microsoft Internet Explorer";
var isFF=navigator.appName=="Netscape";
asfman.Event=function(){var ev;if(isIE){ev=window.event}else if(isFF){var f=this.Event.caller;while(f!=null){var e=f.arguments[0];if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent)){ev=e;break}f=f.caller}}if(ev){ev.srcDom=ev.srcElement||ev.target;ev.cltX=ev.clientX||ev.pageX;ev.cltY=ev.clientY||ev.pageY;return ev}return null}
function sendAnswer(id){
    var answer=document.getElementById("reply").value;
    alert("问题的ID为："+id);
    alert("回复的内容为："+answer);
    //id：问题的ID
    //answer：回复的内容
    //在这里执行你向b.php发送请求的过程和返回时的处理
}
window.onload=function(){
  var as=document.getElementById('qList').getElementsByTagName('a');
  var _answer=document.getElementById("answer");
  for(var i=0,j=as.length;i<j;i++)
       as[i].onclick=function(){
            var left=getMousePos().x;
            var top=getMousePos().y;
            var imgurl=this.getAttribute("data");
            _answer.style.left=left+20+"px";
            _answer.style.top=top+"px";
            _answer.innerHTML='<input type="text" value="" id="reply"><input type="button" id="btn" value="确定"> ';
            _answer.style.display='block';
            var id=this.getAttribute("id");
            document.getElementById("btn").onclick=function(){
                sendAnswer(id);
            }
      },
      _answer.onblur=function(){
        this.style.display='none';
      }
}
</script>

解决方案 »

  1.   

    首先谢谢你的认真教授，我还是JS菜鸟级别，有以下问题不懂：
    1、不会写JS向后台传值和获取返回值的代码，不是我懒，我是百度找了好久答案解决不了才上来问的。
    2、你这个能获取值，我认真学习了，能不能在这基础上，再实现点击回复框以外、回复以及确定的时候，回复框消失。
    谢谢你这么晚在这儿教新人。
      

  2.   

    1:后台无刷新的传值：网上搜索：ajax
    2：点击回复框以外已经会消失的，呃，好像是要先点了一下回复的那个层以后再点外面才会消失
    回复以及确定的时候，回复框消失。你处理完你的数据以后执行：
    document.getElementById("answer").style.display='none';
    即可消失
      

  3.   

    Lz,因为我也找不到Chrome下替代onmouseleave事件的方法。你又要用ajax的，我干脆给你整了个jquery的版本
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>测试</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $("#answer").mouseleave(function(){$(this).hide();});
        $("#qList a").click(function(){
            var left=$(this).offset().left;
            var top=$(this).offset().top;
            $("#answer")
            .css({"left":left,"top":top})
            .html('<input type="text" value="" id="reply"><input type="button" id="btn" value="确定"> ')
            .show();
            $("#reply:focus");//设置输入框焦点
            var id=$(this).attr("id");//问题的ID
            $("#btn").click(function(){
                var answer=$("#reply").val();
                alert("问题的ID为："+id);
                alert("回复的内容为："+answer);
                $.ajax({
                    type: "post",
                    cache: false,
                    url: "b.php",
                    data:"id="+id+"&answer="+answer+"",//具体的参数规格你按自己的改就是了
                    beforeSend: function () {},
                    success: function (data) {
                        alert(data);//data即为你b.php返回的值；再把b.php页面返回的值c弹出显示出来
                        $("#answer").hide();//隐藏回复
                    },
                    error: function (http) {alert("发生错误")},
                    complete: function (http) {                }
                });
            })
        })
    })
    </script>
    </head>
    <body>
    <div id="qList">
    问题1？<a href="javascript:void(0);" id="1">回复</a>
    问题2？<a href="javascript:void(0);" id="2">回复</a>
    问题3？<a href="javascript:void(0);" id="3">回复</a>
    问题4？<a href="javascript:void(0);" id="4">回复</a>
    </div>
    <div id="answer" style=" position:absolute;display:none;border:1px solid #bfbfbf;width:200px;height:50px; background:#fff">
    </body>
    </html>