由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的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. eclipse web 项目配置 运行

  2. [LC] 298. Binary Tree Longest Consecutive Sequence

    Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...

  3. EncryptUtils

    package me.zhengjie.core.utils; import org.springframework.util.DigestUtils; import javax.crypto.Cip ...

  4. 可用倍增LCA解题

    http://codevs.cn/problem/2370/ #include<bits/stdc++.h> using namespace std; ; ; struct node{ i ...

  5. Witness组件详解

  6. MOOC(7)- case依赖、读取json配置文件进行多个接口请求-跳过测试用例(6)

    初始化.跳过测试用例 # test_class_6.py import unittest from mock import mock from day_20200208_mooc.base.inter ...

  7. 多版本firefox共存

    https://blog.csdn.net/gavinxlf/article/details/53173034 https://blog.csdn.net/weixin_33979745/articl ...

  8. PP图|QQ图|正态性检验|K-S检验|S-W检验|

    应用统计学: 物理条件一致时,有理由认为方差是一致的.配对检验可排除物理影响,使方差变小,但是自由度降低了,即样本数变小.二项分布均值假设检验的模型要依据前面的假设条件: PP图统计图要看中间的贴近情 ...

  9. Android开发之《制作自己的su文件》

    目录结构  ─ hello ├── jni ├── Android.mk └── hello.c 编译步骤: # cd hello # export NDK_PROJECT_PATH=`pwd` # ...

  10. Golang Interface 解析

    转自 https://zhuanlan.zhihu.com/p/27652856 先看一段代码: 123456789101112 func (x interface{}) { if x == nil ...