一个网页动态框的实现

2019独角兽企业重金招聘Python工程师标准>>>

小需求：能在一个网页上鼠标点击一下，就在鼠标点击处浮现一个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>

转载于:https://my.oschina.net/u/703355/blog/542177