您的当前位置：首页 js之点击超连接,提示一个层.点击空白层消失_javascript技巧

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

来源：软文情感网

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

原生js版

<HTML>

<HEAD>

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>

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>

function Object_Onclick(){

if(document.activeElement.id!="input_01"){

// alert("dd")

oo(reg_div).style.display='none';

}

window.document.onclick= Object_Onclick;

</ script>

关闭查找提示:

北京

上海

广州

深圳

杭州

南京

成都

武汉

青岛

大连

重庆

三亚

郑州

宁波

西安

长沙

</body>

</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

jquery版本：