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

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

原生js版

提示

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;

}

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

}

function Object_Onclick(){

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

// alert("dd")

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

}

}

window.document.onclick= Object_Onclick;

关闭查找提示:

北京

上海

广州

深圳

杭州

南京

成都

武汉

青岛

大连

重庆

三亚

郑州

宁波

西安

长沙

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

jquery版本：

function object_Onclick(){
  $('#eng_list').css('display','none');//将显示的层隐藏消失
}
window.document.onclick = object_Onclick;
赞 (0)

相关推荐

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

    请教一下.点击 超连接,提示一个层.点击空白.层消失. 原生js版 提示 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;

  • js实现的很酷的连接提示效果

    很酷的连接提示效果 网页特效 这是个不错的网站 教程下载 很好的下载站点,速度快 程序源码 编程爱好者的乐园 文章教程 这里有Delphi的好东东 中国软件 程序员必看 刷新一次,再看看效果.有好几种哦 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格 复制代码 代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-

  • js用图作提交按钮或超连接

    <input type="image" src="imagepath" onclick="document.formname.submit()" /> 如果直接用图片做超连接的话会有一个边框显示,但很多时候是不需要的,去掉这个边框的最简单方法就是把图片的边框设置为0.-_-   <A href="#"><img src="imagepath" border=0 /><

  • js实现仿网易点击弹出提示同时背景变暗效果

    js实现仿网易点击弹出提示同时背景变暗效果

    本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果.分享给大家供大家参考.具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/ 具体代码如下: <html> <head> <title>点击弹出提示,背景变暗</title> <script> func

  • JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

    作者:泣红亭 在上一篇文章<面向事件驱动的编程>中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为. 首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,有个人捏了一下你的手指,你可能会说他捏了你手指,也可能会说他捏了你的手,甚至可能会说他捏了你.事实上三种说法都没错,在浏览器事件的执行中亦有相似的情况

  • ASP.net与SQLite数据库通过js和ashx交互（连接和操作）

    ASP.net与SQLite数据库通过js和ashx交互（连接和操作）

    ASP.net与SQLite数据库通过js和ashx交互(连接和操作): 废话(也是思路):用的是VS2010,打算做网站前后台.由于不喜欢前台语言里加些与html和css和js的其他内容,想实现前后台语言的分离,与前后台通过js的ajax实现交互,故很多百度出来的方法不成立,虽听说ashx过时,但是他实现了我要的效果:即前后台语言不是相互嵌入实现交互,而是通过js实现(有接口就可以). 由于领导指定用SQLite,故这两天还折腾了SQLite,不过对于这种小型的网站,它是个很好的选择(不需要部

  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示 比如 我输入杨字,他会给我提示以下搜索提示 我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • 为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题

    用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示.比如只有第一次用户点击某个"用户信息"按钮或菜单时,才下载"用户信息"这个模块的js组件. 懒加载的实现,依赖与webpack下AMD模式require函数的功能.webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它.开发项目中实现的关键代码是: const basicInfo = { pat

随机推荐