当前位置：Gxlcms > JavaScript > js之点击超连接,提示一个层.点击空白层消失_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：3人阅读

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

原生js版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<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>

</div>

</body>

</HTML>

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

jquery版本：

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

人气教程排行