讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:13:36

原创

1227人浏览过

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

原生js版

<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"&#63;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><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>

大家都在看：

解决自定义工具栏在全屏模式下不可见的问题前端组件全屏模式下自定义工具栏的显示策略解决CSS动画中鼠标跟随元素消失问题：z-index层叠上下文深度解析解决CSS动画中元素层叠顺序问题：利用 z-index 保持元素可见性解决CSS动画与JS光标跟随元素层叠冲突：理解与应用Z-index

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：javascript之对系统的toFixed()方法的修正_javascript技巧下一篇：“增强js程序代码的健壮性”之我见大量示例代码_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

如何用javascript处理音频和视频_相关API有哪些？ JavaScript音视频处理依赖浏览器原生API，核心包括HTMLMediaElement播放控制、WebAudioAPI精细音频处理、MediaRecorder客户端录制及WebRTC/MediaStream实时流处理，需注意兼容性、权限与HTTPS要求。

2025-12-18 16:07:02

745

如何实现javascript惰性求值_它怎样提升性能？ JavaScript无原生惰性求值，但可通过函数封装、生成器、Proxy等模拟，核心是推迟执行、避免无用计算、节省内存及按需生成数据，适用于大集合处理、链式操作和可能中断的场景。

2025-12-18 16:05:51

253

什么是JavaScript的装饰器_它如何增强类和类方法的功能？装饰器是JavaScript中用于修改类、方法等行为的语法特性，本质为声明式函数，需Babel或TypeScript支持；可用于日志、权限校验等场景，分装饰器类型及执行顺序需注意兼容性。

2025-12-18 15:41:07

713

javascript如何与后端交互_AJAX的基本用法是什么？ AJAX是使用XMLHttpRequest或fetchAPI实现异步通信的编程方式，核心是不阻塞JS执行；fetch基于Promise，推荐用于GET/POST请求，需注意状态码判断和响应解析；XMLHttpRequest兼容旧浏览器，需手动处理状态与数据解析。

2025-12-18 15:34:02

459

如何操作表单数据_javascript中表单验证怎么做？表单验证的核心是在提交前检查输入有效性并阻止无效提交，需通过ID或name获取元素、监听submit事件并preventDefault，结合正则实现邮箱、手机号等基础校验，辅以实时反馈和错误提示，且后端必须二次校验。

2025-12-18 15:23:02

840

如何用JavaScript实现一个模态框组件_如何管理焦点和可访问性？模态框真正可用需聚焦管理与可访问性：打开时自动聚焦首个可聚焦元素，限制Tab键焦点范围，关闭后恢复原焦点并正确设置ARIA属性。

2025-12-18 15:18:55

203

什么是Promise对象_javascript中如何处理异步操作？ Promise是JavaScript处理异步操作的标准对象，代表未来完成或失败的操作，具有pending、fulfilled、rejected三种不可逆状态，支持链式调用与错误传递，并提供Promise.all()、race()、allSettled()等静态方法协调多个异步任务。

2025-12-18 14:32:50

210

javascript async/await是什么_如何用它简化异步代码？ async/await是JavaScript中基于Promise的异步语法糖，使异步代码更直观；async函数自动返回Promise，await暂停执行等待Promise完成，需用try/catch错误处理，并行任务应配合Promise.all()。

2025-12-18 14:19:02

377

什么是JavaScript的代理和反射？ Proxy和Reflect是配合使用的对象行为控制机制：Proxy拦截操作，Reflect提供与之对应的标准化底层方法，二者结合可实现安全、可靠、可维护的元编程逻辑。

2025-12-18 13:55:15

762

javascript如何实现移动应用_React Native和Flutter有什么区别 JavaScript可通过ReactNative开发原生移动应用：用JS写逻辑，通过原生桥接调用iOS/Android真实UI组件，渲染原生界面，性能接近原生；采用React风格开发，支持热重载，需配置Node.js、Xcode等环境。

2025-12-18 13:47:02

469

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部