软件开发培训班 >> 编程开发 >> JavaScript

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>

技术文章快速查找

jQuery + Flex 通过拖拽方式动态改变图片的代码

开发 Internet Explorer 右键功能表(ContextMenu)

javascript数组去掉重复

Javascript 键盘keyCode键码值表

40个新鲜出炉的jQuery 插件和免费教程[上]

关于jQuery中.attr()和.prop()的问题探讨

jQuery Form 页面表单提交的小例子

通过AJAX的JS、JQuery两种方式解析XML示例介绍

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

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

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