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

更新时间：2007年05月11日 00:00:00 投稿：mdxy-dxy

最近写一个功能，需要用到点击空白层就让指定的一个层消失，这里简单介绍下实现方法，需要的朋友可以参考下

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

原生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.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 全选注:引入外部Js需再刷新一下页面才能执行]

jquery版本：

function object_Onclick(){
  $('#eng_list').css('display','none');//将显示的层隐藏消失
}
window.document.onclick = object_Onclick;

空白层消失

JavaScript 中的异步 forEach
这篇文章主要介绍了JavaScript异步forEach的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
用js实现的一个根据内容自动生成表格的函数
用js实现的一个根据内容自动生成表格的函数...
2007-08-08
BootStrap中Table隐藏后显示问题的实现代码
这篇文章主要介绍了BootStrap中Table隐藏后显示问题的实现代码,需要的朋友可以参考下
2017-08-08
js fetch异步请求使用实例详解
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案,fetch不是ajax的进一步封装,而是原生js,下面这篇文章主要给大家介绍了关于js fetch异步请求使用的相关资料,需要的朋友可以参考下
2021-11-11
探索浏览器页面关闭window.close()的使用详解
这篇文章主要介绍了探索浏览器页面关闭window.close()的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
很实用的js选项卡切换效果
很棒的JavaScript选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
Bootstrap插件全集
这篇文章主要为大家详细介绍了Bootstrap插件，包括Bootstrap过渡效果插件、Bootstrap下拉菜单插件等，感兴趣的小伙伴们可以参考一下
2016-07-07
JavaScript实现购物车基本功能
这篇文章主要为大家详细介绍了JavaScript实现购物车的基本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
javascript检测浏览器的缩放状态实现代码
这篇文章主要介绍了javascript检测浏览器的缩放状态实现代码,需要的朋友可以参考下
2014-09-09
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)...
2007-01-01