一個網頁動態框的實現

小需求：能在一個網頁上鼠標點擊一下，就在鼠標點擊處浮現一個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>