点击按钮弹出回复框的有关问题,新手努力学习中。多谢
点击按钮弹出回复框的问题,新手努力学习中。谢谢!
页面a.html有若干问题,每个问题后面有个“回复”链接(注意是链接不是按钮)。当点击回复的时候弹出一个回复框,注意回复框就出现在鼠标的右边。输入内容以后点击“回复”按钮(注意是按钮不是链接),则把输入的内容和该问题的id值无刷新传递到b.php页面,再把b.php页面返回的值c弹出显示出来。当点击确定后又回到a.html的问题列表。
画了个简图,另外文字描述关键之外已经描红,诚心请教,认真学习!谢谢!
------解决方案--------------------
Lz,因为我也找不到Chrome下替代onmouseleave事件的方法。你又要用ajax的,我干脆给你整了个jquery的版本
页面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>