js之点击 超连接,提示一个层.点击空白层消失_javascript技巧

请教一下.点击 超连接,提示一个层.点击空白.层消失. 

原生js版

<title>提示</title> <meta http-equiv="content-type" content="text/html; charset=gbk"> <style type="text/css"> BODY { BACKGROUND: #fff; FONT: 76%/1.5 Arial,sans-serif; COLOR: #333 } input{ width:200px;border: 1px solid #86B9D6; } #reg_div{ color: #154BA0; border: 1px solid #86B9D6; background: #D9EEF9; position: absolute; z-index: 30; height: 180px; width:400px; } .city{ width:80px; float:left; padding:8px; text-align:center; } .ps_div{ padding:10px 10px 2px 10px; border-bottom:1px dotted #ccc; } </style> <script> function oo(obj){ return typeof(obj)=="string"&#63;document.getElementById(obj):obj } function allt(id){ e=oo(id) var et=e.offsetTop; var el=e.offsetLeft; while(e=e.offsetParent){ et+=e.offsetTop; el+=e.offsetLeft; } oo("reg_div").style.left=(el) + "px"; oo("reg_div").style.top=(et+20) + "px"; oo("reg_div").style.display=''; // oo("reg_div2").innerHTML=id; // 娣诲姞鎻愮ず淇℃伅(鏍规嵁id鍒ゆ柇) // oo("reg_div").style.display='none'; } function bllt(id){ oo("input_01").value=oo(id).innerHTML oo("reg_div").style.display='none'; } </script> <script> function Object_Onclick(){ if(document.activeElement.id!="input_01"){ // alert("dd") oo(reg_div).style.display='none'; } } window.document.onclick= Object_Onclick; </script> <input id="input_01" type="text" onfocus="allt(this);"> <div id="reg_div" style="display:none"> <div class="ps_div"> <span style="float:right;" onclick="oo('reg_div').style.display='none'">鍏抽棴</span>鏌ユ壘鎻愮ず:</div> <div id="city_01" class="city" onclick="bllt(this)">鍖椾含</div> <div id="city_02" class="city" onclick="bllt(this)">涓婃捣</div> <div id="city_03" class="city" onclick="bllt(this)">骞垮窞</div> <div id="city_04" class="city" onclick="bllt(this)">娣卞湷</div> <div id="city_01" class="city" onclick="bllt(this)">鏉</div> </div>