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 ...
随机推荐
- 序列化模块ModelSerializer
课程准备 配置:settings.py INSTALLED_APPS = [ # ... 'rest_framework', ] DATABASES = { 'default': { 'ENGINE' ...
- kubectl格式化输出和调试
1.格式化输出 以特定的格式想终端输出详细信息,可以在 kubectl 命令中添加 -o 或者 -output 选项 输出格式 描述 -o=custom-columns=<spec> 使 ...
- Ajax - XMLHTTP实例
url:http://localhost/index.htm <html> <head> <title>Ajax</title> <script ...
- OfficeCommandbarDesigner20170202.rar
OfficeCommandbarDesigner用于对Office各个常用组件.VBE的工具栏进行查看和编辑的工具. 界面主要分为上下两个表格控件,上面的控件列举出所有Commandbar,下面的控件 ...
- 关于正则表达式 g,m 参数的总结,为了回答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”
为了解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统 ...
- [LC] 139. Word Break
Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determine ...
- Python使用pycharm导入pymysql(MySQL)或pymssql(SQLServer)
file->setting->project->project interperter,双击右侧出现的pip,弹出安装包,搜索pymysql->选择第一个->Instal ...
- python3下scrapy爬虫(第十一卷:scrapy数据存储进mongodb)
说起python爬虫数据存储就不得不说到mongodb,现在我们来试一下scrapy操作mongodb 首先开启mongodb mongod --dbpath=D:\mongodb\db 开启服务后就 ...
- Django ORM单表查询必会13条
必知必会13条 操作下面的操作之前,我们实现创建好了数据表,这里主要演示下面的操作,不再细讲创建准备过程 <1> all(): 查询所有结果 <2> filter(**kwar ...
- better-scroll插件的介绍及使用
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,可以是竖向滚动的列表,也可以是横向的,用better-scroll可以帮助我们实现这个 什么是 better-scroll better ...