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   class="iwvjtn8m0"   id=reg_div style="display:none">     <div   id="iwvjtn8m0"   class=ps_div><span style="float:right;" onclick="oo('reg_div').style.display='none'">關閉</span>查找提示:</div> <div   class="iwvjtn8m0"   id=city_01 class=city onclick="bllt(this)">北京</div> <div   class="iwvjtn8m0"   id=city_02 class=city onclick="bllt(this)">上海</div> <div   class="iwvjtn8m0"   id=city_03 class=city onclick="bllt(this)">廣州</div> <div   class="iwvjtn8m0"   id=city_04 class=city onclick="bllt(this)">深圳</div> <div   class="iwvjtn8m0"   id=city_01 class=city onclick="bllt(this)">杭州</div> <div   class="iwvjtn8m0"   id=city_02 class=city onclick="bllt(this)">南京</div> <div   class="iwvjtn8m0"   id=city_03 class=city onclick="bllt(this)">成都</div> <div   class="iwvjtn8m0"   id=city_04 class=city onclick="bllt(this)">武漢</div> <div   class="iwvjtn8m0"   id=city_01 class=city onclick="bllt(this)">青島</div> <div   class="iwvjtn8m0"   id=city_02 class=city onclick="bllt(this)">大連</div> <div   class="iwvjtn8m0"   id=city_03 class=city onclick="bllt(this)">重慶</div> <div   class="iwvjtn8m0"   id=city_04 class=city onclick="bllt(this)">三亞</div> <div   class="iwvjtn8m0"   id=city_01 class=city onclick="bllt(this)">鄭州</div> <div   class="iwvjtn8m0"   id=city_02 class=city onclick="bllt(this)">寧波</div> <div   class="iwvjtn8m0"   id=city_03 class=city onclick="bllt(this)">西安</div> <div   class="iwvjtn8m0"   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

疑難解答

圖片精選

網友關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

js之點擊 超連接,提示一個層.點擊空白層消失

js之點擊超連接,提示一個層.點擊空白層消失