管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

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

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%0D%0Afunction%20oo(obj)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20return%20typeof(obj)%3D%3D%22string%22%26%2363%3Bdocument.getElementById(obj)%3Aobj%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%0D%0Afunction%20allt(id)%7B%20%0D%0A%0D%0A%0D%0A%0D%0A%20%20%20%20e%3Doo(id)%20%0D%0A%0D%0A%20%20%20%20var%20et%3De.offsetTop%3B%20%0D%0A%0D%0A%20%20%20%20var%20el%3De.offsetLeft%3B%20%0D%0A%0D%0A%20%20%20%20while(e%3De.offsetParent)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20et%2B%3De.offsetTop%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20el%2B%3De.offsetLeft%3B%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20oo(%22reg_div%22).style.left%3D(el)%20%2B%20%22px%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20oo(%22reg_div%22).style.top%3D(et%2B20)%20%2B%20%22px%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20oo(%22reg_div%22).style.display%3D''%3B%20%0D%0A%0D%0A%2F%2F%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20oo(%22reg_div2%22).innerHTML%3Did%3B%20%20%20%20%2F%2F%20%20%20%20%E6%B7%BB%E5%8A%A0%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF(%E6%A0%B9%E6%8D%AEid%E5%88%A4%E6%96%AD)%20%0D%0A%0D%0A%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20oo(%22reg_div%22).style.display%3D'none'%3B%20%0D%0A%0D%0A%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20bllt(id)%7B%20%0D%0A%0D%0A%0D%0A%0D%0A%20%20oo(%22input_01%22).value%3Doo(id).innerHTML%20%0D%0A%0D%0A%20%20oo(%22reg_div%22).style.display%3D'none'%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%3C%2Fscript%3E">

</HEAD>

<body>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%0D%0Afunction%20Object_Onclick()%7B%20%0D%0A%0D%0A%0D%0A%0D%0Aif(document.activeElement.id!%3D%22input_01%22)%7B%20%0D%0A%0D%0A%2F%2F%20%20%20%20alert(%22dd%22)%20%0D%0A%0D%0A%20%20oo(reg_div).style.display%3D'none'%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Awindow.document.onclick%3D%20Object_Onclick%3B%20%0D%0A%0D%0A%0D%0A%0D%0A%3C%2Fscript%3E">

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

教程首页更多教程