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

所属分类：网络编程 / JavaScript 阅读数： 1026

收藏 0赞 0分享

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

原生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> 
 
</HEAD> 
<body> 
 
<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;

更多精彩内容其他人还在看

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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和proto的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和__proto__的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

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

浅谈javascript中的prototype和proto的理解