页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

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

点击运行可以看到效果:

<!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.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 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 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 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> 
</body>

</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于js之点击超连接,提示一个层.点击空白.层消失内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：网上抓的一个特效
下一篇文章：JavaScript的9个陷阱及评点分析

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

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

同类文章

最近更新

热点排行