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

2019-11-21 02:05:45

字体：大中小

来源：转载

供稿：网友

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

原生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;

上一篇：模拟用户操作Input元素，不会触发相应事件

下一篇：网上抓的一个特效

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注

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

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