由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法。

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function show(obj,id) {
var objDiv = $("#"+id+""); /**
这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容
$.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){
objDiv.html("<br>"+res.data+"<br>");
}, 'json');
**/
$(objDiv).css("display","block");
// e=e||window.event; // 兼容firefox
$(objDiv).css("left", 0); // 初始化,防止叠加
$(objDiv).css("top", 0);
var e = window.event || arguments.callee.caller.arguments[0];
$(objDiv).css("left", e.clientX + 30);
$(objDiv).css("top", e.clientY - 45);
}
function hide(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display", "none");
}
</script> <div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;">
提示1效果
</div>
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;">
不知道你们在干嘛呢,<br/>哈哈哈哈
</div> <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
<br><br><br><br><br>
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>

这个提示框框,丑是丑了点,但是可以救急!

HTML简单的提示框的更多相关文章

  1. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  2. Android:Toast简单消息提示框

    Toast是简单的消息提示框,一定时间后自动消失,没有焦点. 1.简单文本提示的方法: Toast.makeText(this, "默认的toast", Toast.LENGTH_ ...

  3. Android 入门第一课 一个简单的提示框

    1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...

  4. css伪元素实现tootip提示框

    先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...

  5. js 提示框的实现---组件开发之(一)

    自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...

  6. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  7. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  8. 【js+jquery】通用、简单的JS 提示框

    1.该插件不需要依赖 jquery,仅仅使用了原生js 2.简单.通用.可自定义修改样式.支持等待N秒消失.支持消失后跳转其他url , 功能还是比较完善的. 3.不废话,上代码: (我存放的位置在 ...

  9. jquery 实现一个简单的成功提示框,失败提示框

    主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...

随机推荐

  1. 创想变现:斯坦福设计创新课堂ME310分享(上篇)

    编者按:今年6月,微软亚洲研究院人机交互组研究员顾嘉唯,在美国斯坦福大学担任了d-School的ME310设计课程的项目评审.该课程是斯坦福大学的全球联合新产品设计创新课程,学习方式以小组为单位,每个 ...

  2. 一、安装Docker CE

    卸载旧版本 较旧版本的Docker被称为docker或docker-engine.如果已安装这些,需要卸载以及相关的依赖项. $ sudo yum remove docker \ docker-cli ...

  3. VSTO开发中级教程 配套资源下载

    项目实例源代码: 编程过程中用到的工具.软件: 教学视频:

  4. 关于MyBatis的运行原理(转载)

    1.获取sqlSessionFactory对象: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSessionFactory: 注意: ...

  5. MySQL 之全文索引

    最近在复习数据库索引部分,看到了 fulltext,也即全文索引,虽然全文索引在平时的业务中用到的不多,但是感觉它有点儿意思,所以花了点时间研究一下,特此记录. 引入概念通过数值比较.范围过滤等就可以 ...

  6. js - 常用的继承

    零.序言 参考资料:JavaScript常用八种继承方案: 注:1.此篇笔记是站在上述资料的肩膀上的一篇小结: 2.阅读之前建议温习一下 js 中的 prototype 和 constructor:( ...

  7. 制作MACOSX 10.9Mavericks安装启动U盘教程

    苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...

  8. Trailing Zeroes (III) LightOJ - 1138 二分+找规律

    Time Limit: 2 second(s) Memory Limit: 32 MB You task is to find minimal natural number N, so that N! ...

  9. Java WebSocket实现简易聊天室

    一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...

  10. staruml百度网盘下载

    分享staruml官方百度网盘下载 下载时间:2019年9月4日 21:27:37  StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarU ...