一个网页动态框的实现

小需求：能在一个网页上鼠标点击一下，就在鼠标点击处浮现一个div，里面包含了鼠标点击的项对应的一些后台数据。

简单思路：在网页上放置一个隐藏的div，在鼠标点击时间里想办法获取到须要展现的值赋值给div，而后给div的位置赋值，而后显示这个div。

1. 获取到要展现的值

   很简单，参考上一篇博文，使用xmlhttprequest，传入点击对象的信息到后台服务，而后获取到服务处理以后的响应。

2. 给div位置赋值

   这个是个老大难了，使用了position:absolute; related 等等都有个各类问题，网上有不少介绍这些东西的内容就不详述了，后来发现使用jquery来作赋值很简单。看下面的代码，只须要在网页点击的对象处事件响应用showDiv；而后在隐藏的div处事件响应用hideDiv，就ok了

 function showDiv(e){
    ee=arguments.callee.caller.arguments[0] || window.event;  //此行很重要，为了适配不一样浏览器

    var url ="getsomething.php?enb="+e.innerHTML;
		var showstr;
		var xmlhttp;
        xmlhttp=new XMLHttpRequest();
	    
        xmlhttp.onreadystatechange=function()
        {  
		    if (xmlhttp.readyState==4 && xmlhttp.status==200){
				
		        showstr =xmlhttp.responseText;
		    }
        }
        xmlhttp.open("GET",url,false);
        xmlhttp.send();
		
	$("#showTip").html(showstr);
		
	$("#showTip").css("top",ee.clientY );
	$("#showTip").css("left",ee.clientX  );
	$("#showTip").show();
	}
function hideDiv(){
        $("#showTip").hide();
    }

   隐藏的div，最重要的是 position:fixed这个style

<div  ondblclick='hideDiv()' id='showTip' style='background-color: #F5F5DC; position: fixed; display: none; '></div>