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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML>

<HEAD>

<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"?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>

</HEAD>

<body>

<script>

function Object_Onclick(){

 

if(document.activeElement.id!="input_01"){ //    alert("dd")  

 oo(reg_div).style.display='none'; }

}

 window.document.οnclick= Object_Onclick;

</script>

<input id=input_01 type="text" οnfοcus="allt(this);">

<div id=reg_div style="display:none">  

   <div class=ps_div><span style="float:right;" οnclick="oo('reg_div').style.display='none'">关闭</span>查找提示:</div>

<div id=city_01 class=city οnclick="bllt(this)">北京</div>

<div id=city_02 class=city οnclick="bllt(this)">上海</div>

<div id=city_03 class=city οnclick="bllt(this)">广州</div>

<div id=city_04 class=city οnclick="bllt(this)">深圳</div>

<div id=city_01 class=city οnclick="bllt(this)">杭州</div>

<div id=city_02 class=city οnclick="bllt(this)">南京</div>

<div id=city_03 class=city οnclick="bllt(this)">成都</div>

<div id=city_04 class=city οnclick="bllt(this)">武汉</div>

 <div id=city_01 class=city οnclick="bllt(this)">青岛</div>

<div id=city_02 class=city οnclick="bllt(this)">大连</div>

<div id=city_03 class=city οnclick="bllt(this)">重庆</div>

<div id=city_04 class=city οnclick="bllt(this)">三亚</div>

<div id=city_01 class=city οnclick="bllt(this)">郑州</div>

<div id=city_02 class=city οnclick="bllt(this)">宁波</div>

<div id=city_03 class=city οnclick="bllt(this)">西安</div>

<div id=city_04 class=city οnclick="bllt(this)">长沙</div>

</div>

 </body>

</HTML>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值