HTML简单的提示框
由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的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简单的提示框的更多相关文章
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- Android:Toast简单消息提示框
Toast是简单的消息提示框,一定时间后自动消失,没有焦点. 1.简单文本提示的方法: Toast.makeText(this, "默认的toast", Toast.LENGTH_ ...
- Android 入门第一课 一个简单的提示框
1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...
- css伪元素实现tootip提示框
先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...
- js 提示框的实现---组件开发之(一)
自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- 【js+jquery】通用、简单的JS 提示框
1.该插件不需要依赖 jquery,仅仅使用了原生js 2.简单.通用.可自定义修改样式.支持等待N秒消失.支持消失后跳转其他url , 功能还是比较完善的. 3.不废话,上代码: (我存放的位置在 ...
- jquery 实现一个简单的成功提示框,失败提示框
主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...
随机推荐
- set|lambda|reduce
#!/usr/bin/python a=set([i for i in range(4,8)]) b=set([i for i in range(5,12)]) c= sorted(a & b ...
- Python练习五-函数
1.简述普通参数.指定参数.默认参数.动态参数的区别1)普通参数中,有形参和实参,其中形参是定义函数时写的参数,实参是调用函数时传给函数的参数:2)默认参数是在定义函数时,参数设定一个默认值:3)指定 ...
- 各大厂RTSP取流的URI
目前使用过的各大厂商取流规则是在实际的工作中遇到的相关视频接入问题,通过rtsp协议接入视频数据的一些记录,其中的图片可能来源于网络,内容部分来源于网络,本人仅仅是对相关内容作了汇总. 海康RTSP取 ...
- 机器学习算法之——LR(未完成)
LR的形式 sklearn中的LR模块sklearn.linear_model.LogisticRegression LR的目标函数 主要的考虑点有三个:处理什么类型的问题?是否正则以及什么正则?求解 ...
- resent|aspiration|deficiency|diagnosed|distract|emphasize
VERB 怨恨;憎恶;愤恨If you resent someone or something, you feel bitter and angry about them. She resents h ...
- 【Linux_Shell 脚本编程学习笔记五、Oracle JDK1.8 安装shell 脚本】
脚本使用说明: 首先在脚本的同级目录下有个 jdk的安装包 脚本和安装包必须在同级目录下才能够安装(脚本没有优化,还可以使用 wget 从网上下载指定版本的 jdk 安装包) #!/bin/sh ...
- OpenCV Laplace 算子
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- Android开发之《实现类似Toast可以自动消失的提示栏Tip》
import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.cont ...
- 《时间线》:WWT 数字宇宙,虚拟星空
李北辰/文 王尔德说:我们生活在阴沟里,却仍有人仰望星空.如今,这句感叹依旧代表某种程度的正确,但这位19世纪的英国绅士有所不知:在一百多年后的东方"帝都",当困于阴沟中的年轻人们 ...
- Java IO: RandomAccessFile
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) RandomAccessFile允许你来回读写文件,也可以替换文件中的某些部分.FileIn ...