首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

点击按钮弹出回复框的有关问题,新手努力学习中。多谢

2012-09-16 
点击按钮弹出回复框的问题,新手努力学习中。谢谢!页面a.html有若干问题,每个问题后面有个“回复”链接(注意是

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

页面a.html有若干问题,每个问题后面有个“回复”链接(注意是链接不是按钮)。当点击回复的时候弹出一个回复框,注意回复框就出现在鼠标的右边。输入内容以后点击“回复”按钮(注意是按钮不是链接),则把输入的内容和该问题的id值无刷新传递到b.php页面,再把b.php页面返回的值c弹出显示出来。当点击确定后又回到a.html的问题列表。

画了个简图,另外文字描述关键之外已经描红,诚心请教,认真学习!谢谢!

[解决办法]
Lz,因为我也找不到Chrome下替代onmouseleave事件的方法。你又要用ajax的,我干脆给你整了个jquery的版本

HTML code
<!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> 

热点排行